getboundingclientrect返回一个domrect对象，包含left、top、right、bottom、width、height六个只读属性，所有值均相对于视口左上角（0,0），随滚动实时变化，需重新调用获取最新值。
getBoundingClientRect 返回什么数据
getBoundingClientRect() 返回一个 DOMRect 对象，包含 left、top、right、bottom、width、height 六个只读属性。这些坐标是相对于**视口（viewport）左上角**的像素值，不是相对于文档或父元素。
常见误解是以为 top 是元素距页面顶部的距离 —— 实际上如果元素滚动出视口，top 可能为负；如果元素在视口下方，top 可能大于 window.innerHeight。
注意：DOMRect 是实时快照，调用后不会自动更新，后续 DOM 变化（如 resize、scroll、样式修改）需重新调用才能获取新值。
如何安全调用 getBoundingClientRect
直接对 null 或未挂载的节点调用会报错 Cannot read property 'getBoundingClientRect' of null，所以务必先校验元素存在。
- 用
document.querySelector获取元素后，检查返回值是否为null - 在 React/Vue 等框架中，确保在 DOM 渲染完成后再调用（例如
useEffect里加setTimeout(() => {}, 0)或requestAnimationFrame） - 避免在
resize或scroll事件中高频直接调用 —— 建议节流或使用IntersectionObserver替代
简单示例：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
const el = document.querySelector('#my-box');
if (el) {
const rect = el.getBoundingClientRect();
console.log(rect.top, rect.left); // 相对于视口
}
getBoundingClientRect 和 offsetTop/offsetLeft 的区别
offsetTop/offsetLeft 是相对于**最近的定位祖先（position: relative/absolute/fixed）**，而 getBoundingClientRect() 始终相对于视口，不受 CSS 定位影响。
这意味着：
- 如果父容器有
transform、scale、rotate，offsetTop不会反映变换效果，但getBoundingClientRect()会（它基于渲染后的实际几何位置） - 如果页面有
zoom或devicePixelRatio !== 1，getBoundingClientRect()返回的是 CSS 像素值（已缩放），不是物理像素 -
offsetParent可能为null（比如display: none或fixed元素），但getBoundingClientRect()只要元素在 DOM 中且可渲染，就总能返回有效矩形
滚动时矩形坐标会变，但你可能没意识到
这是最容易忽略的一点：只要用户滚动页面，getBoundingClientRect().top 就会立刻变化 —— 它不“记住”初始位置，也不缓存。
如果你在 scroll 事件里记录了一次 rect，然后后面直接用它计算位置，结果大概率出错。
- 需要动态响应滚动？每次用前都重新调用
el.getBoundingClientRect() - 想判断是否进入视口？别只比
rect.top ，还要考虑 <code>rect.bottom > 0 - 做 tooltip 定位时，记得加上
window.scrollX/window.scrollY才能得到绝对文档坐标（rect.left + window.scrollX）
绝对坐标换算示例：
const rect = el.getBoundingClientRect(); const absX = rect.left + window.scrollX; const absY = rect.top + window.scrollY;
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
