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