Есть ли эквивалент для 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 выделить текстовый узел, а затем получить ограничивающий прямоугольник непосредственно из 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() теперь не используется в стандарте DOM, хотя более старые браузеры по-прежнему отключают использование диапазона после его вызова.)