¿Hay un equivalente a getBoundingClientRect() para los nodos de texto?

Question

¿Hay alguna forma de obtener el límite de un nodo de texto?

El método getBoundingClientRect() se define solo en los elementos, y el elemento principal es más grande que el nodo de texto real.

Answer 1

Envuelva el nodo de texto en un <span>, obtenga el boundingRect de ese lapso.

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

Answer 2

Si no es necesario para apoyar IE8 o más, se puede utilizar un Range a select the text node, y luego obtener el rect saltando directamente desde el Range.

Ejemplo (debería funcionar en esta página):

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 

También se puede reutilizar el objeto Range si está haciendo esto para múltiples nodos de texto; solo asegúrate de no llamar al range.detach() hasta que termines. (Nota: Range.detach() ahora es una operación no operativa en the DOM standard, aunque los navegadores más antiguos todavía deshabilitarán el uso del rango después de su invocación).