getboundingclientrect() 返回元素在视口中的实际几何边界矩形，包含 left、top、right、bottom、width、height 六个像素值属性，受 transform、滚动等影响但不含 margin，返回只读 domrect 对象且需手动调用更新。
用 getBoundingClientRect() 方法就能获取元素的几何边界矩形。
什么是 getBoundingClientRect()？
这个方法返回一个 DOMRect 对象，包含元素在视口中的左、右、上、下、宽、高六个关键数值，单位是像素。它反映的是元素当前渲染后的实际位置和尺寸，受 CSS 变换（transform）、缩放、滚动、边框、内边距等影响，但不包含外边距（margin）。
返回值里有哪些关键属性？
DOMRect 对象包含以下常用属性：
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
- left：元素左边界到视口左边缘的距离（含滚动偏移）
- top：元素上边界到视口顶部的距离
- right：元素右边界到视口左边缘的距离
- bottom：元素下边界到视口顶部的距离
- width 和 height：元素的渲染宽度和高度（含 padding + border，不含 margin）
怎么用？简单示例
假设有一个 id 为 box 的 div：
const el = document.getElementById('box');
const rect = el.getBoundingClientRect();
console.log(rect.left, rect.top); // 输出相对于视口的位置
console.log(rect.width, rect.height); // 输出渲染尺寸
注意：该方法返回的对象是只读的，且每次调用都会重新计算——适合用于监听滚动或动画中动态获取位置，但高频调用时建议缓存或节流。
常见注意事项
有几个容易出错的地方要留意：
- 结果基于当前视口，页面滚动后数值会变；如需相对于文档的位置，可加上
window.scrollX和window.scrollY - 如果元素不可见（display: none）或未渲染（比如刚创建还没 append），返回的 width/height 为 0，left/top 通常为 0
- 对使用
transform: scale()的元素，width/height是缩放后的渲染尺寸，但left/top仍按变换后坐标系计算 - 它不响应式更新，需要手动再次调用才能拿到最新值
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
