当前位置：文江博客话题详情

检索 DOM 文本节点位置

发布于 2024-07-10 03:20:58 字数 43 浏览 9 评论 0原文

是否可以检索文本节点的几何位置（即距父元素、页面等的顶部/左侧偏移量）？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤云独去闲 2024-07-17 03:20:58

不直接。 TextNode 没有用于测量视口定位的原始 IE 偏移*（和类似）扩展。

仅在 IE 上，您可以创建一个 TextRange 对象，费力地尝试将其与 TextNode 的边界对齐，然后测量 TextRange 的boundingLeft/boundingTop，并将其添加到父元素的位置（通过通常的方式获得）。然而，对于可能不稳定的单浏览器解决方案来说，这是一项艰巨的工作。

您可能能够摆脱的另一种方法是将文本包装在 span 元素中（在文档中，或者通过脚本动态和/或临时），并使用 span 来测量位置，假设它没有拾取任何额外的内容可能影响位置的样式。但请注意，包裹的跨度可能不会给出预期的右/底值；根据您想用它做什么，您可能最终会包装第一个和最后一个字符或其他一些安排。

总结一下：呃，没什么好。

回复收藏 0 原文

暮光沉寂 2024-07-17 03:20:58

今天您可以通过 Range.getBoundingClientRect()。

// 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>.

Today you can via Range.getBoundingClientRect().

// 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 原文

罪#恶を代价 2024-07-17 03:20:58

相对于视口的文本节点

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
  }
}

Text node relative to viewport

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

Text node relative to an element

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
  }
}

Character offset relative to text node's parent element

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
  }
}

回复收藏 0 原文