Получение позиции текстового узла DOM - PullRequest
Новая
       22

Получение позиции текстового узла DOM

17 голосов
/ 28 декабря 2008

Возможно ли получить геометрическую позицию (то есть смещения сверху / слева от родительского элемента, страницы и т. Д.) Текстового узла?

Ответы [ 5 ]

14 голосов
/ 29 декабря 2008

Не напрямую. TextNode не имеет изначально-IE смещения * (и аналогичных) расширений для измерения позиционирования в области просмотра.

Только в IE вы можете создать объект TextRange, старательно пытаться выровнять его по границам TextNode, затем измерить boundingLeft / boundingTop объекта TextRange и добавить его в положение родительского элемента (полученного обычные средства). Тем не менее, это куча работы для потенциально нестабильного решения для одного браузера.

Другим подходом, с которым вам, возможно, удастся обойтись, будет завершение текста в элементе span (либо в документе, либо динамически и / или временно по сценарию), и использование span для измерения позиционирования, при условии, что он не выбирается любые дополнительные стили, которые могут повлиять на позицию. Обратите внимание, что завернутый диапазон может не дать ожидаемых правых / нижних значений; в зависимости от того, что вы хотите с ним сделать, вы можете закончить переносом первого и последнего символа или каким-либо другим способом.

В итоге: ну, ничего хорошего.

2 голосов
/ 04 апреля 2018

Сегодня вы можете через Range.getBoundingClientRect(). IE9 + 

// Get your text node
const el = document.querySelector('strong')
const textNode = el.firstChild;

// Get coordinates via Range
const range = document.createRange();
range.selectNode(textNode);
const coordinates = range.getBoundingClientRect()

console.log(coordinates);
/* Demo CSS, ignore, highlights box coordinates */ body{max-width:300px}strong{position:relative}strong,strong:before{border:solid 1px red}strong:before{content:'';position:absolute;right:100%;bottom:100%;width:100vw;height:100vh;pointer-events:none}
The red lines will show you the coordinates bounding box of the <strong>selected textnode</strong>.
0 голосов
/ 26 июля 2014

В наши дни есть способы. Один из способов: getBoundingRectangle: https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

0 голосов
/ 29 декабря 2008

Нет встроенного кросс-браузерного способа сделать это. я мог бы используйте jQuery с плагином Dimensions: http://brandonaaron.net/docs/dimensions/

Это кросс-браузер, который, помимо прочего, даст вам смещения по высоте, ширине и x & y.

0 голосов
/ 28 декабря 2008

Посмотрите на эту статью - она ​​использует свойство offsetParent для рекурсивного вычисления смещения.

Я бы порекомендовал jquery вместо того, чтобы сворачивать ваши собственные методы для разных браузерных вещей, подобных этой. CSS-функции jquery , кажется, имеют необходимые методы!

...