javascript - 文本节点是否有等效于 getBoundingClientRect() 的方法？

Question

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

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

Answer 1

如果不需要支持 IE8 或更早版本，可以使用 aRange选择文本节点，然后直接从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 标准中是无操作的，尽管一些较旧的浏览器在调用该范围后仍会禁用该范围。）

Answer 2

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

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