当前位置：文江博客话题详情

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

发布于 2024-08-05 16:06:19 字数 82 浏览 5 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小瓶盖 2024-08-12 16:06:19

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

If you don't need to support IE8 or older, you can use a Range to select the text node, and then get the bounding rect directly from the Range.

Example (should work in this page):

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

You can also reuse the Range object if you're doing this for multiple text nodes; just make sure not to call range.detach() until you're done. (Note: Range.detach() is now a no-op in the DOM standard, though some older browsers will still disable use of the range after its invocation.)

回复收藏 0 原文

静谧 2024-08-12 16:06:19

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

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

Wrap the text node in a <span>, get the boundingRect of that span.

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

回复收藏 0 原文

~没有更多了~