📅 最后修改于: 2023-12-03 15:15:35.100000 🧑 作者: Mango
getBoundingClientRect()是 Web API 中的一个方法，它用于获取元素相对于视口的大小和位置。
element.getBoundingClientRect()
此方法返回一个DOMRect对象，包含了元素的位置，尺寸和其他信息。
返回值是一个DOMRect对象，其中包含以下属性：
x：元素相对于视口左侧的距离y：元素相对于视口顶部的距离width：元素的宽度（包括元素的边框和滚动条，如果存在的话）height：元素的高度（包括元素的边框和滚动条，如果存在的话）top：元素顶部边缘相对于视口顶部的距离right：元素右侧边缘相对于视口左侧的距离bottom：元素底部边缘相对于视口顶部的距离left：元素左侧边缘相对于视口左侧的距离<!DOCTYPE html>
<html>
<head>
<title>getBoundingClientRect() demo</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById("box");
var rect = box.getBoundingClientRect();
console.log(rect.x); // 8
console.log(rect.y); // 8
console.log(rect.width); // 200
console.log(rect.height); // 200
console.log(rect.top); // 8
console.log(rect.right); // 208
console.log(rect.bottom); // 208
console.log(rect.left); // 8
</script>
</body>
</html>
在上面的示例中，我们创建了一个200x200px的红色div，并使用getBoundingClientRect()方法获取该元素的位置和大小信息。
getBoundingClientRect()方法返回的是一个矩形的信息，即使该元素并非矩形，也会返回包含其外接矩形的信息。