准确获取DOM元素尺寸需按需选择：offsetWidth/offsetHeight获取含padding、border、滚动条的整数占位尺寸；getBoundingClientRect()返回视口坐标系下的浮点宽高及位置；clientWidth/clientHeight获取不含border和滚动条的内容区尺寸；隐藏元素需临时显示或用getComputedStyle解析。
准确获取 DOM 元素尺寸，关键不是选“最简单的”，而是看你要什么：是渲染后占位大小？内容区可用空间？还是带小数的精确像素？不同场景对应不同方法，用错就容易拿到 0、auto 或错位值。
要拿渲染后实际占位宽高（含 padding + border + 滚动条）
用 offsetWidth / offsetHeight —— 最常用也最稳：
- 返回整数像素值，包含内容区、内边距、边框，还有滚动条（如果存在）
- 元素
display: none时返回0；visibility: hidden不影响结果 - 不响应 CSS 动画或 transform 缩放，只反映布局后静态尺寸
要高精度浮点值，或需坐标信息（比如弹窗定位、拖拽）
用 getBoundingClientRect() —— 一调多得：
- 返回对象含
width、height（浮点）、left、top等，单位像素，精度高于 offset - 所有值相对于当前视口左上角，自动适配缩放、transform、滚动状态
- 即使元素被 scale(1.5) 或 rotateZ，它仍返回视觉上真实的宽高和位置
要内容区域内部尺寸（不含边框/滚动条）
用 clientWidth / clientHeight：
立即学习“Java免费学习笔记（深入）”；
- 只算内容 + 内边距，排除 border、margin 和滚动条本身占用的空间
- 适合判断文字是否溢出、计算可绘制区域（如 canvas 绘图边界）
- 当元素有垂直滚动条时，
clientWidth会自动减去滚动条宽度
隐藏元素（display: none）怎么取真实尺寸？
不能直接读，得临时“唤醒”再测：
- 方案一：设
position: absolute; visibility: hidden; left: -9999px;，测完恢复 - 方案二：用
getComputedStyle读 CSS 的width/height值，但要注意返回可能是"auto"或带单位字符串，需parseFloat转换 - 方案三：对 SVG 元素，优先用
el.width.baseVal.value和el.height.baseVal.value
