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

Question

例如，

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

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

Answer 1

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

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>