有没有类似于getBoundingClientRect()适用于文本节点的等效方法？

Question

有没有一种方法可以获取文本节点的边界矩形?

getBoundingClientRect()方法仅定义在元素上，且父元素比实际文本节点要大。

- user163369

Answer 1

如果您不需要支持IE8或更早版本，则可以使用Range来选择文本节点，然后直接从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()现在在DOM标准中已成为无操作。）

- Noyo

---

要测试这个在你的浏览器中是否可行：document.implementation.hasFeature('Range', '2.0'); - Noyo

这种方法不适用于input或textarea内的文本节点。 - khpatel4991

为了让一件事情清晰明了：这里指的是textNode的高度，而不是文本的高度，两者可能有很大的不同。我知道楼主特别要求的是这个，但只是为了不让新手感到困惑而已 :-) - undefined

Answer 2

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

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

- eyelidlessness