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

Question

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

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

Answer 1

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

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

var text = document.querySelector('#question-header .question-hyperlink').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() теперь не используется в в стандарте DOM , хотя некоторые старые браузеры по-прежнему отключают использование диапазона после его вызова.)

Answer 2

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

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