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

【问题标题】：Is there an equivalent to getBoundingClientRect() for text nodes?文本节点是否有等效于 getBoundingClientRect() 的方法？
【发布时间】：2010-11-30 11:16:49
【问题描述】：

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

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

【问题讨论】：

标签： javascript dom bounding-box textnode

【解决方案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 中是无操作的，尽管一些旧浏览器在调用后仍会禁用该范围。）

【讨论】：

测试这是否适用于您的导航器：document.implementation.hasFeature('Range', '2.0');
此方法不适用于输入或文本区域内的文本节点

【解决方案2】：

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

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

【讨论】：