javascript - 如何获取网页元素中文本的矩形(而不是元素本身的矩形)？

有时，元素中文本的矩形与元素本身的矩形不同。我想获取文本的矩形，而不是元素之一。

我尝试了两个MDN函数：Element.getClientRects()和Element.getBoundingClientRect()，但是它们找不到文本的矩形。

例如，有以下按钮：

<button style="position:absolute; left:58px; top:224px; width:100px; height:40px;">

  Both the span and the paragraph have a border set.

</button><br/>

getClientRects和getBoundingClientRect都只能找到按钮本身的矩形。

如何找到文本“跨度和段落都有边界设置”的矩形？

最佳答案

借助Range API方法，getBoundingClientRect可以将其提供给您：

const range = document.createRange();
const button = document.querySelector('button');
const textNode = button.firstChild;
range.selectNode( textNode );
// get the bounding box of the TextNode
const rect = range.getBoundingClientRect();

const border = document.getElementById('border');
border.style.top = rect.top + 'px';
border.style.left = rect.left + 'px';
border.style.width = rect.width + 'px';
border.style.height = rect.height + 'px';

#border {
  display: block;
  border: 1px solid;
  position: absolute;
}

<button style="position:absolute; left:58px; top:24px; width:100px; height:40px;">

  Both the span and the paragraph have a border set.

</button><br/>

<div id="border"></div>