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

Question

例如，

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

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

Answer 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]);
}

<div id="wombat">Wombat</div>