是否有与文本节点的getBoundingClientRect（）等价的东西？

Question

有没有办法获得文本节点的边界矩形？

getBoundingClientRect（）方法仅在元素上定义，父元素大于实际文本节点。

Answer 1

将文本节点包装在<span>中，获取该跨度的boundingRect。

var span = document.createElement('span'); 
textNode.parentNode.insertBefore(span, textNode); 
span.appendChild(textNode); 
var rect = span.getBoundingClientRect(); 

Answer 2

如果您不需要支持IE8或以上，你可以使用一个Range来select the text node，然后从Range得到边界RECT直接。

例（应在这一页的工作）：

var text = document.getElementById('nav-questions').childNodes[0]; 
var range = document.createRange(); 
range.selectNode(text); 
var rect = range.getBoundingClientRect(); 
range.detach(); // frees up memory in older browsers 

您也可以重复使用，如果你这样做是对多个文本节点Range对象;只要确保不要致电range.detach()，直到完成。 （注意：Range.detach()现在不在the DOM standard中，尽管旧版浏览器在调用之后仍然会禁用该范围。）