是否有与文本节点相同的getBoundingClientRect()？

Question

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

getBoundingClientRect()方法仅在元素上定义,父元素比实际文本节点大.

Answer 1

如果您不需要支持IE8或更早版本,您可以使用a 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标准中没有操作,但旧的浏览器在调用后仍会禁用范围.)

Answer 2

将文本节点包装在a中<span>,获取该boundingRect跨度.

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