getBoundingClientRect() 方法详解

getBoundingClientRect() 是一个用于获取元素相对于视口（viewport，即浏览器窗口）位置和尺寸的方法。它返回一个包含元素边界信息的 DOMRect 对象，这些信息对于精确定位和计算元素位置非常有用。

---

语法

element.getBoundingClientRect()

---

返回值

返回一个 DOMRect 对象，包含元素的边界信息。主要属性包括：

1. x 和 y:

   • x: 元素边界的左侧相对于视口的水平坐标（等同于 left）。
   • y: 元素边界的顶部相对于视口的垂直坐标（等同于 top）。
   • 注意: 在某些浏览器中，x 和 y 可能不被支持，使用 left 和 top 替代即可。

2. width 和 height:

   • width: 元素的宽度（包括内边距，但不包含滚动条、边框或外边距）。
   • height: 元素的高度（包括内边距，但不包含滚动条、边框或外边距）。

3. top, right, bottom, left:

   • top: 元素边界的顶部相对于视口的垂直距离。
   • right: 元素边界的右侧相对于视口的水平距离。
   • bottom: 元素边界的底部相对于视口的垂直距离。
   • left: 元素边界的左侧相对于视口的水平距离。

---

DOMRect 对象属性含义

属性	描述
x	等同于 left，表示左侧相对于视口的水平距离。
y	等同于 top，表示顶部相对于视口的垂直距离。
width	元素的宽度，不包括边框和外边距。
height	元素的高度，不包括边框和外边距。
top	元素顶部边界相对于视口的垂直距离。
right	元素右侧边界相对于视口的水平距离。
bottom	元素底部边界相对于视口的垂直距离。
left	元素左侧边界相对于视口的水平距离。

注意事项

1. 相对于视口而非页面:

   • getBoundingClientRect() 返回的是元素的位置相对于视口的距离，而不是页面距离。如果页面有滚动条，返回的 top 和 left 不会包含滚动的偏移量。

2. 滚动的影响:

   • 如果需要计算相对于整个页面的距离，可以加上页面的滚动偏移量：

     const pageX = rect.left + window.scrollX;
     const pageY = rect.top + window.scrollY;
     

3. 高精度值:

   • getBoundingClientRect() 返回的值可能不是整数，可能会包含小数（如 123.45），因为它考虑了设备像素比（DPR）。

4. 变化的布局:

   • 如果元素的样式或布局发生变化，需要在变化后调用 getBoundingClientRect() 来获取最新的边界信息。

5. 兼容性:

   • getBoundingClientRect() 是现代浏览器广泛支持的方法，但早期的 IE 对返回的 DOMRect 对象支持有限。