如何获取html文本节点中单行的位置

提问者：小点点

如何获取html文本节点中单行的位置

不知道这个问题怎么写。我想做的是获取HTML文本节点中各个行的位置。

例如，在此图像中，每个蓝色框都是带有一些样式和填充的span。所以蓝色框上有文字“测试3测试你好测试测试测试！” 是一个span，它换行到下一行，其HTML格式如下所示:

<span>test 3 testing hello test test test!</span>

如何获取两行文本的客户端顶部，左侧，宽度和高度？也就是说，我只想要行中“test3 testing hello test”部分的所有大小/位置信息，以及“test test！”部分的大小/位置信息。线。相对于页面或父div。如果我对span本身调用getBoundingClientRect()，它不会给我任何信息，只会给我第一行和第二行的组合，而且就我所知，文本没有被分解成更小的节点，以便我在JS中迭代。

共1个答案

匿名用户

方法elem.GetBoundingClientRect()返回最小矩形的窗口坐标，该矩形将elem封装为内置DOMRect类的对象。

主要DOMRect属性:

x/y-x/y-矩形原点相对于窗口的坐标，width/height-矩形的宽度/高度（可以是负值）。此外，还有派生属性:

顶部/底部-Y坐标用于顶部/底部矩形边缘，左侧/右侧-X坐标用于左侧/右侧矩形边缘。

文档坐标:

// get document coordinates of the element
function getCoords(elem) {
  let box = elem.getBoundingClientRect();

  return {
    top: box.top + window.pageYOffset,
    right: box.right + window.pageXOffset,
    bottom: box.bottom + window.pageYOffset,
    left: box.left + window.pageXOffset
  };
}