Есть ли эквивалент getBoundingClientRect() для текстовых узлов?

Question

Есть ли способ получить ограничивающий прямоугольник текстового узла?

Метод getBoundingClientRect() определяется только для элементов, а родительский элемент больше, чем фактический текстовый узел.

Answer 1

Оберните текстовый узел в <span>, получите boundingRect этого диапазона.

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

Answer 2

Если вам не нужна поддержка IE8 или старше, вы можете использовать Range для select the text node, а затем получить ограничивающий прямоугольник непосредственно из Range.

Пример (должен работать на этой странице):

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 

Вы также можете повторно использовать Range объект, если вы делаете это для нескольких текстовых узлов; просто не забудьте позвонить range.detach(), пока не закончите. (Примечание: Range.detach() теперь не работает в the DOM standard, хотя старые браузеры по-прежнему будут отключать использование диапазона после его вызова.)