是否有与文本节点相同的getBoundingClientRect（）？

Question

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

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

Answer 1

如果您不需要支持IE8或更早版本，则可以使用Range至select the text node，然后直接从Range获取边界矩形。

示例（应在此页面中使用）：

var text = document.querySelector('#question-header .question-hyperlink').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中的无操作，但某些旧版浏览器在调用后仍会禁用该范围。）

Answer 2

将文字节点包裹在<span>中，获取该范围的boundingRect。

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