如何使用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>