getBoundingClientRect 相对于文档的距离

getBoundingClientRect()方法可以获取一个元素相对于整个文档的位置和大小信息[^1]。该方法返回一个包含top、left、right、bottom、width和height属性的对象，这些属性表示元素的位置和大小。这些属性的值是相对于文档的坐标，而不是相对于浏览器视口的坐标[^2]。

以下是一个示例，演示如何使用getBoundingClientRect()方法获取元素相对于文档的距离：

var element = document.getElementById("myElement");
var rect = element.getBoundingClientRect();

console.log("元素相对于文档的距离：");
console.log("上边距离：", rect.top);
console.log("左边距离：", rect.left);
console.log("右边距离：", rect.right);
console.log("下边距离：", rect.bottom);
console.log("宽度：", rect.width);
console.log("高度：", rect.height);

请注意，getBoundingClientRect()方法返回的坐标是相对于整个文档的，而不是相对于浏览器视口的。这意味着如果页面有滚动，元素的位置信息也会随之改变。