GetBoundingClientRect 但相对于整个文档

etc

使用 GetBoundingClientRect 方法可以获取元素相对于视口的位置和尺寸信息。但如果我们想要获取元素相对于整个文档的位置信息，该怎么办呢？这就需要用到另一个方法—— getclientRects。

getclientRects 方法返回一个 DOMRectList 对象，其中包含了与元素关联的所有矩形的位置和尺寸信息。这些矩形是相对于文档的，而不是相对于视口的。

下面我们来看一个简单的例子，以更好地理解 getclientRects 的使用方法。

html
<!DOCTYPE html>
<html>
<body>
<div id="box" style="width: 200px; height: 100px; background-color: yellow; position: ABSolute; top: 100px; left: 100px;"></div>
<script>
var box = document.getElementById("box");
var rects = box.getclientRects();
for (var i = 0; i < rects.length; i++) {</p>  var rect = rects[i];
  console.log("矩形 " + (i+1) + "：");
  console.log("左上角坐标：(" + rect.left + ", " + rect.top + ")");
  console.log("右下角坐标：(" + rect.right + ", " + rect.bottom + ")");
  console.log("宽度：" + rect.width);
  console.log("高度：" + rect.height);
  console.log("===========");
}
</script>
</body>
</html>

在这个例子中，我们创建了一个 id 为 "box" 的 div 元素，设置了它的位置和尺寸，并给它添加了一些样式。然后我们使用 getclientRects 方法获取该元素的矩形信息，并遍历输出每个矩形的位置和尺寸信息。

在控制台中，我们可以看到输出了一个矩形的位置和尺寸信息。这个矩形的左上角坐标是 (100, 100)，右下角坐标是 (300, 200)，宽度是 200，高度是 100。

通过使用 getclientRects 方法，我们可以方便地获取元素相对于整个文档的位置和尺寸信息，而不仅仅是相对于视口的。这在一些需要进行精确布局或碰撞检测的场景中非常有用。

getclientRects 方法的使用案例

在这个案例中，我们使用 getclientRects 方法来检测两个元素是否发生了碰撞。假设我们有两个 div 元素，分别为 "box1" 和 "box2"。我们想要判断它们是否重叠了。

html
<!DOCTYPE html>
<html>
<body>
<div id="box1" style="width: 200px; height: 100px; background-color: yellow; position: ABSolute; top: 100px; left: 100px;"></div>
<div id="box2" style="width: 300px; height: 200px; background-color: orange; position: ABSolute; top: 150px; left: 150px;"></div>
<script>
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var rect1 = box1.getclientRects()[0];
var rect2 = box2.getclientRects()[0];
if (rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top) {
  console.log("box1 和 box2 重叠了");
} else {
  console.log("box1 和 box2 没有重叠");
}
</script>
</body>
</html>

在这个案例中，我们首先获取了两个元素的矩形信息，然后通过比较它们的位置关系来判断它们是否重叠了。如果两个矩形的左边界小于右边界，右边界大于左边界，上边界小于下边界，下边界大于上边界，那么它们就发生了碰撞。

在控制台中，我们可以看到输出了 "box1 和 box2 没有重叠"，说明这两个元素没有发生碰撞。

通过使用 getclientRects 方法，我们可以轻松地检测元素之间是否发生了碰撞，从而实现一些复杂的布局和交互效果。

使用 getclientRects 方法可以方便地获取元素相对于整个文档的位置和尺寸信息。通过遍历返回的 DOMRectList 对象，我们可以获取每个矩形的位置和尺寸信息，并进行一些布局和碰撞检测等操作。

在本文中，我们介绍了 getclientRects 方法的基本用法，并给出了两个案例来展示它的实际应用。希望这些例子可以帮助你更好地理解和使用 getclientRects 方法。