js获取元素到文档区域document的(横向、纵向)坐标的两种方法

2023年6月10日下午1:35 • JavaScript

JS获取元素到文档区域document的坐标是一个常见的需求，这个过程可以有两种常见的方法来实现。

方法一：使用`offsetLeft`、`offsetTop`逐层累加

offsetLeft和offsetTop属性分别可以获取元素左、上边框到其容器元素上边框的距离。如果我们需要获取元素到文档区域document的水平和竖直方向的距离，则需要逐层遍历每个容器元素，将其offsetLeft和offsetTop值累加起来即可。

function getElementPosition(element) {
  let xPos = 0,
      yPos = 0;

  // 从当前元素开始循环累加offsetLeft、offsetTop值
  while (element) {
    xPos += element.offsetLeft - element.scrollLeft + element.clientLeft;
    yPos += element.offsetTop - element.scrollTop + element.clientTop;
    element = element.offsetParent;
  }

  return [xPos, yPos];
}

上述代码中，首先定义了xPos和yPos两个计数器变量，分别表示元素到文档区域横向和纵向的距离。然后通过while循环找到元素的所有容器元素，累加其offsetLeft和offsetTop值并计入计数器，最后返回结果数组。

方法二：使用`getBoundingClientRect()`方法

getBoundingClientRect()方法可以获取元素相对于视口的坐标和尺寸信息，其中包括元素左上角相对于文档区域左上角的横、纵坐标值。通过计算文档区域左上角相对于视口的偏移量，可以得到元素相对于文档区域的坐标。

function getElementPosition(element) {
  const rect = element.getBoundingClientRect();
  const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const left = rect.left + scrollLeft;
  const top = rect.top + scrollTop;
  return [Math.round(left), Math.round(top)];
}

上述代码中，首先使用getBoundingClientRect()方法获取元素的位置信息和尺寸信息。然后使用document.documentElement.scrollLeft（IE、Chrome）或document.body.scrollLeft(Firefox)获取文档区域的横向滚动距离，使用document.documentElement.scrollTop（IE、Chrome）或document.body.scrollTop(Firefox)获取文档区域的纵向滚动距离，最后加上文档区域到视口的偏移量，得到元素相对于文档区域的坐标。

示例说明

下面我们通过两个简单的示例来说明这两种方法的使用：

<body>
  <div style="width: 200px; height: 200px; margin: 50px auto; background-color: #f00;"
    onclick="showPosition(this)">
  </div>
</body>

上述代码创建了一个红色背景的div元素，通过onclick事件触发函数showPosition()，该函数可以获取并显示该div元素相对于文档区域的坐标。我们可以使用上述两种方法中的任意一种进行实现，例如：

function showPosition(element) {
  const position = getElementPosition(element);
  console.log(`Method 1: (${position[0]}, ${position[1]})`);
}

function showPosition(element) {
  const rect = element.getBoundingClientRect();
  const position = [
    rect.left + (document.documentElement.scrollLeft || document.body.scrollLeft), 
    rect.top + (document.documentElement.scrollTop || document.body.scrollTop)
  ];
  console.log(`Method 2: (${position[0]}, ${position[1]})`);
}

以上示例中，当我们点击红色的div元素时，会在控制台输出该元素相对于文档区域的横向和纵向坐标。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js获取元素到文档区域document的(横向、纵向)坐标的两种方法 - Python技术站