DOM元素宽高测量需明确目标：offsetWidth/Height测布局占用空间，clientWidth/Height测可视区域，getBoundingClientRect()测视觉尺寸（含transform），getComputedStyle()读CSS计算值，scrollWidth/Height测总内容尺寸。
DOM 元素宽高不是简单“取个值”就能搞定的事，关键在于你到底想量什么：是样式定义的值？内容区域可用空间？实际渲染尺寸？还是带 transform 的视觉大小？选错方法，结果就差一截。
明确你要量的是哪一种“宽高”
不同属性/方法对应不同物理含义，不能混用：
- offsetWidth / offsetHeight：元素在布局中占的实际像素空间，含内容 + 内边距 + 边框 + 垂直/水平滚动条（如果存在）；返回整数；隐藏元素（display: none）返回 0。
- clientWidth / clientHeight：内部可视区域尺寸，含内容 + 内边距，不含边框、外边距、滚动条；常用于计算可滚动内容的“视口”大小。
- getBoundingClientRect().width / height：最接近人眼所见的尺寸，返回浮点数，包含边框和内边距，并受 CSS transform（如 scale、rotate）影响；是获取视觉尺寸的唯一可靠方式。
-
getComputedStyle(el).width / height：读取最终计算后的 CSS 值（字符串，如 "200px" 或 "auto"），需 parseFloat 解析；结果取决于
box-sizing：content-box 下是纯内容宽高，border-box 下等同于 offsetWidth/Height（不含滚动条）。 - scrollWidth / scrollHeight：整个内容区域总尺寸，含溢出部分；适合判断是否需要滚动、或做自适应高度计算。
注意隐藏元素和未渲染状态
display: none 的元素所有 layout 相关尺寸（offset/client/scroll 系列）都为 0。若需获取其理论尺寸，可临时修改样式再恢复：
- 设
visibility: hidden; position: absolute; display: block; - 读取
offsetHeight或getBoundingClientRect() - 立即还原原始样式（避免页面重排闪烁）
注意：不要只改 display，因为 visibility: hidden 仍占布局空间，而 position: absolute 可避免影响其他元素。
立即学习“Java免费学习笔记（深入）”；
警惕 box-sizing 和滚动条干扰
同一个元素，clientWidth 和 offsetWidth 的差值，通常就是左右边框 + 垂直滚动条宽度之和。但滚动条是否计入，取决于浏览器和系统设置（比如 macOS 默认隐藏滚动条，此时 clientWidth 可能等于 offsetWidth）。
- 当
box-sizing: border-box时，getComputedStyle(el).width的数值 ≈offsetWidth（不含滚动条） - 当
box-sizing: content-box时，getComputedStyle(el).width≈offsetWidth - 左右padding - 左右边框 - 若元素有 overflow: auto 且内容溢出，
clientWidth会小于offsetWidth（因滚动条占位）
响应式场景下推荐组合策略
单纯读一次尺寸往往不够，尤其在动态布局或 resize 后：
- 监听窗口变化用
window.addEventListener('resize', handler)，但开销大 - 更优解是使用
ResizeObserver，它只在目标元素尺寸真正变化时触发，且不强制回流 - 对动画或拖拽类操作，优先用
getBoundingClientRect()，因为它天然支持 transform，且精度更高 - 初始化布局时，建议在
DOMContentLoaded后读取，避免样式未生效导致尺寸为 0
