Esiste un equivalente a getBoundingClientRect() per i nodi di testo?

Question

C'è un modo per ottenere il limite di limitazione di un nodo di testo?

Il metodo getBoundingClientRect() è definito solo sugli elementi e l'elemento padre è più grande del nodo di testo effettivo.

Answer 1

Avvolgere il nodo di testo in un <span>, ottenere lo boundingRect di tale intervallo.

var span = document.createElement('span'); 
textNode.parentNode.insertBefore(span, textNode); 
span.appendChild(textNode); 
var rect = span.getBoundingClientRect(); 

Answer 2

Se non è necessario sostenere IE8 o più, è possibile utilizzare un Range per select the text node, e quindi ottenere il rettangolo di delimitazione direttamente dal Range.

Esempio (dovrebbe funzionare in questa pagina):

var text = document.getElementById('nav-questions').childNodes[0]; 
var range = document.createRange(); 
range.selectNode(text); 
var rect = range.getBoundingClientRect(); 
range.detach(); // frees up memory in older browsers 

È inoltre possibile riutilizzare l'oggetto Range se si sta facendo questo per molteplici nodi di testo; assicurati di non chiamare range.detach() finché non hai finito. (Nota: Range.detach() è ora non operativo in the DOM standard, sebbene i browser più vecchi continueranno a disabilitare l'utilizzo dell'intervallo dopo il suo richiamo.)