如何使用 javascript 获取 HTML 文本节点的位置和大小？答案

【问题标题】：How to get the position and size of a HTML text node using javascript?如何使用 javascript 获取 HTML 文本节点的位置和大小？
【发布时间】：2013-04-25 07:49:00
【问题描述】：

例如，

<div style="width:100px;text-align:center">text</div>

我想获取 text 文本节点的位置和大小，而不是它的 div 包装器。有可能吗？

【问题讨论】：

你可以得到 div 的位置，然后你必须添加任何顶部和左侧的填充和边框。
@user125697: text 是一个节点，而不是一个元素。它不重复那个问题。
this 可以帮到你
@Asken：如何获取内边距和边框信息？我无法使用 Chrome 的检查器找到它的填充和边框值。
这不是重复的。查找文本节点的位置/尺寸与对元素执行相同操作是不同的问题。

标签： javascript html dom

【解决方案1】：

在现代浏览器（最近的 Mozilla、WebKit 和 Opera）中，您可以使用包含文本节点的 getClientRects() method of a DOM range。

var textNode = document.getElementById("wombat").firstChild;
var range = document.createRange();
range.selectNodeContents(textNode);
var rects = range.getClientRects();
if (rects.length > 0) {
    console.log("Text node rect: ", rects[0]);
}

&lt;div id="wombat"&gt;Wombat&lt;/div&gt;

【讨论】：

这段代码是否适用于旧浏览器。如果没有，旧浏览器的解决方案是什么。
@Domezchoc：哪些旧浏览器？有一个在 IE 中使用 TextRange 的解决方案，只要您的文本节点是元素的唯一子节点，这很容易。否则，仍然可以创建 TextRange，但需要做更多工作。
我的意思是 IE，我明白了。首先我需要找到TextRange，然后是getClientRects。谢谢
@user984003：sn-p 在 iOS 11 的 Safari 上似乎可以正常工作。