你知道getBoundingClientRect()是什么吗？超详细讲解！【前端】

你不行 谁行？

getBoundingClientRect() 是什么？

getBoundingClientRect() 是一个用于获取 DOM 元素相对于视口（viewport）的位置和大小的方法。它返回一个 DOMRect 对象，其中包含元素的尺寸及其在视口中的位置。

基本概念：

• 视口：浏览器显示内容的区域，不包括工具栏、菜单栏等。
• DOMRect 对象：getBoundingClientRect() 返回的对象，包含元素的边界信息。

返回的 DOMRect 对象属性：

• left：元素左边界相对于视口左边的距离。
• top：元素上边界相对于视口上边的距离。
• right：元素右边界相对于视口左边的距离。
• bottom：元素下边界相对于视口上边的距离。
• width：元素的宽度（等于 right - left）。
• height：元素的高度（等于 bottom - top）。
• x：表示元素的左边界相对于视口左边的距离，与 left 属性的值相同。它是元素在水平方向上的起始位置。
• y：y 属性表示元素的上边界相对于视口上边的距离，与 top 属性的值相同。它是元素在垂直方向上的起始位置。
  

特性和注意事项：

• 单位：所有返回的值都是以像素为单位的浮点数。
• 滚动影响：返回的坐标是相对于视口的，因此它会考虑页面滚动。也就是说，如果页面滚动了，top 和 left 的值会随之变化。
• 包含边框：计算的尺寸包括元素的边框（border）。
• 不包含伪元素：返回的尺寸不包括 CSS 伪元素（如 ::before 和 ::after）的大小

使用场景：

• 定位元素：在实现拖拽、弹出窗口、工具提示等功能时，需要知道元素相对于视口的位置。
• 碰撞检测：游戏开发或动画中，用于检测元素之间的碰撞。
• 滚动事件：在滚动事件中使用它来确定元素是否进入或离开视口

示例代码：

const element = document.querySelector('#myElement');
const rect = element.getBoundingClientRect();

console.log('Left:', rect.left);
console.log('Top:', rect.top);
console.log('Right:', rect.right);
console.log('Bottom:', rect.bottom);
console.log('Width:', rect.width);
console.log('Height:', rect.height);