getBoundingClientRect()返回元素在视口中的绝对位置和尺寸，含left、top、right、bottom、width、height六个只读像素值；left/top为相对视口左上角偏移量，随滚动变化；加scrollX/Y可转为文档绝对坐标；width/height已兼容transform缩放与裁剪，但不等于offsetWidth/offsetHeight；支持IE9+，跨域iframe中会抛SecurityError。
getBoundingClientRect() 是 JS 中获取元素在视口（viewport）中绝对位置和尺寸最常用、最可靠的方法。它返回一个 DOMRect 对象，包含 left、top、right、bottom、width、height 六个只读属性，单位均为像素。
获取视口内的绝对坐标（相对于左上角）
调用后得到的 left 和 top 表示元素**左上角在当前可视区域中的横纵偏移量**（即距离浏览器窗口左边缘、上边缘的距离），不是相对于整个文档的滚动位置。
注意：该值会随页面滚动实时变化 —— 因为它是相对于“当前可见区域”的，不是固定文档坐标。
- 若需转为**相对于整个文档顶部/左侧**的绝对坐标，可加上
window.scrollX和window.scrollY：
const rect = el.getBoundingClientRect(); const absLeft = rect.left + window.scrollX; const absTop = rect.top + window.scrollY;
宽高直接可用，且自动处理 CSS 缩放与 transform
width 和 height 是计算后的实际渲染尺寸，已自动兼容以下情况：
- CSS
transform: scale()或rotate()（返回的是变换后包围盒的宽高） - 父级设置了
transform（此时getBoundingClientRect返回的是最终合成层中的尺寸） - 元素被部分裁剪或溢出隐藏（
clip-path、overflow: hidden不影响该方法返回值）
但注意：width/height 不等于 offsetWidth/offsetHeight —— 后者包含 border，且不响应 CSS transform 缩放。
兼容性好，但注意 iframe 跨域限制
该方法在所有现代浏览器（包括 IE9+）中都支持，使用简单：
const el = document.querySelector('#myBox');
if (el) {
const rect = el.getBoundingClientRect();
console.log(rect.left, rect.top, rect.width, rect.height);
}
唯一限制是：若元素位于跨域的 <iframe></iframe> 内，调用会抛出安全错误（SecurityError），无法获取。
常见误用提醒
- 不要用
getBoundingClientRect()判断是否“在屏幕内”时只看top —— 应结合 <code>top 0等条件 - 不要在循环中频繁调用（尤其配合 scroll 事件）—— 可节流或使用
IntersectionObserver替代 - 返回对象是快照值，不是响应式绑定；DOM 更新后需重新调用
