用Javascript 获取页面元素的位置的代码

获取页面元素的位置是前端开发中的一个基本需求，Javascript提供了多种方法来获取元素的位置信息。下面是获取页面元素位置的代码攻略：

1. 通过getBoundingClientRect方法获取元素的位置

getBoundingClientRect方法是Javascript提供的获取元素位置的函数，它返回一个矩形对象，包括一个元素的左上角、右下角的坐标、宽高等信息。

示例1：获取单个元素的位置信息

// 获取id为"box"的元素位置信息
const box = document.getElementById("box");
const rect = box.getBoundingClientRect();
console.log(rect.x, rect.y, rect.width, rect.height);  // 输出元素的左上角x、y坐标和宽高信息

示例2：获取多个元素的位置信息

// 获取class为"box"的所有元素位置信息
const boxes = document.getElementsByClassName("box");
for(let i=0; i<boxes.length; i++){
  const rect = boxes[i].getBoundingClientRect();
  console.log(rect.x, rect.y, rect.width, rect.height);  // 输出元素的左上角x、y坐标和宽高信息
}

2. 通过offsetTop和offsetLeft属性获取元素的位置

offsetTop和offsetLeft属性是元素对象的属性，可以返回元素相对于父元素的距离，因此可以通过它们来获取元素在页面上的位置。

示例：获取单个元素的位置信息

// 获取id为"box"的元素位置信息
const box = document.getElementById("box");
let left = box.offsetLeft;
let top = box.offsetTop;
while(box.offsetParent !== null){
  box = box.offsetParent;
  left += box.offsetLeft;
  top += box.offsetTop;
}
console.log(left, top);  // 输出元素在页面上的位置

通过上面的代码，可以得到元素的相对位置，而如果想要得到元素的绝对位置，需要遍历它的父元素直到body元素才行。

至此，获取页面元素位置的代码攻略已经介绍完毕。