getBoundingClientRect()
获取元素相对于视口的位置和尺寸信息
方法说明
getBoundingClientRect() 返回元素的大小及其相对于视口的位置。这是最常用的定位 API，返回一个 DOMRect 对象。
const rect = element.getBoundingClientRect();
// 返回值：DOMRect 对象
{
x: 100, // 元素左边缘距离视口左侧的距离
y: 200, // 元素上边缘距离视口顶部的距离
width: 300, // 元素宽度
height: 150, // 元素高度
top: 200, // 等同于 y
right: 400, // x + width
bottom: 350, // y + height
left: 100 // 等同于 x
}- x / left - 元素左边缘距离视口左侧的距离
- y / top - 元素上边缘距离视口顶部的距离
- right - 元素右边缘距离视口左侧的距离（x + width）
- bottom - 元素下边缘距离视口顶部的距离（y + height）
- width - 元素宽度
- height - 元素高度
💡 核心优势
与 offset 属性不同，getBoundingClientRect() 返回的是相对于视口的位置，而不是相对于父元素。当页面滚动时，这些值会实时更新。
示例 1：基础测量
移动鼠标或滚动页面，观察数值的实时变化
目标元素
实时数据（相对于视口）
x (left):
0px
y (top):
0px
right:
0px
bottom:
0px
width:
0px
height:
0px
const box = document.getElementById('box');
const rect = box.getBoundingClientRect();
console.log(`左上角位置: (${rect.x}, ${rect.y})`);
console.log(`元素尺寸: ${rect.width} × ${rect.height}`);示例 2：检测元素是否在视口中
判断元素是否完全或部分可见
↓ 向下滚动找到目标元素 ↓
目标元素
继续滚动...
可见性检测
元素状态:
检测中...
top:
0px
bottom:
0px
视口高度:
0px
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= window.innerHeight &&
rect.right <= window.innerWidth
);
}示例 3：计算元素重叠区域
检测两个元素是否重叠
元素 A
元素 B
重叠检测结果
是否重叠:
-
重叠区域宽度:
0px
重叠区域高度:
0px
function checkOverlap(el1, el2) {
const rect1 = el1.getBoundingClientRect();
const rect2 = el2.getBoundingClientRect();
return !(
rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom
);
}示例 4：滚动时实时更新位置
观察页面滚动时元素位置的变化
观察我
位置追踪
Y (top):
0px
相对于视口顶部:
0px
页面滚动距离:
0px
💡 关键点
页面滚动时，getBoundingClientRect()
的返回值会实时更新。如果需要获取元素相对于文档的位置（不受滚动影响），需要加上 scrollY：
absoluteTop = rect.top + window.scrollY
示例 5：元素定位锚点
在某个元素附近定位另一个元素（如工具提示）
目标元素
工具提示位置
元素顶部:
0px
元素左侧:
0px
提示框 Y:
0px
提示框 X:
0px
function positionTooltip(element, tooltip) {
const rect = element.getBoundingClientRect();
// 在元素上方居中显示工具提示
tooltip.style.top = (rect.top - tooltip.offsetHeight - 10) + 'px';
tooltip.style.left = (rect.left + rect.width / 2 - tooltip.offsetWidth / 2) + 'px';
}示例 6：固定定位元素的特殊情况
固定定位元素的位置是相对于视口的
相对定位
固定定位
相对定位元素
top:
0px
left:
0px
固定定位元素
top:
0px
left:
0px
💡 注意
固定定位元素（position: fixed）的 getBoundingClientRect() 返回的值不会随页面滚动而变化，因为它本身就是相对于视口定位的。
浏览器兼容性
| 方法 | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| getBoundingClientRect() | ✓ 全版本 | ✓ 全版本 | ✓ 全版本 | ✓ 全版本 |
| 返回值 width/height | ✓ 全版本 | ✓ 全版本 | ✓ 全版本 | ✓ 全版本 |
| 返回值 x/y | ✓ 全版本 | ✓ 全版本 | ✓ 全版本 | ✓ 全版本 |
总结
- 相对于视口：返回值是相对于视口的位置，不是相对于文档
- 实时更新：滚动或缩放时，返回值会自动更新
- 包含 border：width/height 包含元素的 border
- 常用场景：检测可见性、元素定位、碰撞检测、懒加载等
- 性能考虑：频繁调用会触发 reflow，建议缓存结果