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

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

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

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

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

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

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

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

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

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

Сегодня ты можешь через 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.info(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>.

Текстовый узел относительно области просмотра

function getBoundingClientRectText(textNode) {
  const range = document.createRange()
  range.selectNode(textNode)
  return range.getBoundingClientRect()
}

Текстовый узел относительно элемента

function getTextOffsetRelativeToElement(element, textNode) {
  const elementRect = element.getBoundingClientRect()
  const range = document.createRange()
  range.selectNode(textNode)
  const textRect = range.getBoundingClientRect()
  return {
    top: textRect.top - elementRect.top,
    left: textRect.left - elementRect.left
  }
}

Смещение символа относительно родительского элемента текстового узла

function getCharOffset(textNode, offset) {
  const parentRect = textNode.parentElement.getBoundingClientRect()
  const range = document.createRange()
  range.setStart(textNode, offset)
  range.setEnd(textNode, offset + 1)
  const charRect = range.getBoundingClientRect()
  return {
    top: charRect.top - parentRect.top,
    left: charRect.left - parentRect.left
  }
}