最常用方式是用 offsetwidth/offsetheight 获取渲染后尺寸，返回含 padding 和 border 的整数像素值，不触发重排；需 sub-pixel 精度或处理缩放时用 getboundingclientrect()；监听尺寸变化推荐 resizeobserver。
用 offsetWidth 和 offsetHeight 获取渲染后尺寸
这是最常用、最直接的方式，返回的是元素在页面中实际占用的像素值（含 padding + border，不含 margin）。它不触发重排，性能好，且兼容所有现代浏览器和 IE9+。
- 如果元素被
display: none隐藏，offsetWidth/offsetHeight返回0；用visibility: hidden则仍可读取 - 对行内元素（如
<span></span>），只有设置了display: inline-block或类似样式后，这些属性才可靠 - 注意：它们返回整数，小数部分会被截断（例如 123.7px → 123）
需要包含滚动区域或精确小数时用 getBoundingClientRect()
当你要获取相对于视口的位置、处理缩放、或需要 sub-pixel 精度（比如动画帧计算），getBoundingClientRect() 更合适。它返回一个对象，其中 width 和 height 是浮点数。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 即使元素被
transform: scale(0.8)缩放，getBoundingClientRect().width也会反映缩放后的实际像素尺寸 - 该方法会强制触发同步布局（即“重排”），频繁调用可能影响性能，尤其在滚动或动画中
- 返回值是只读对象，不能修改；且坐标基于当前视口，页面滚动时会变化
clientWidth/clientHeight 和 scrollWidth/scrollHeight 的区别
这三个尺寸系列容易混淆，关键看是否含滚动条、是否含溢出内容：
-
clientWidth= width + padding（不含 border、滚动条、溢出内容） -
scrollWidth= 实际内容总宽度（含不可见的溢出部分），常用来判断是否出现横向滚动 -
scrollHeight对于有 overflow-y: auto 的容器，能告诉你内容真实高度，比offsetHeight更适合做懒加载触发判断 - 所有这些属性都受 box-sizing 影响：设为
border-box时，width 已包含 padding 和 border
动态尺寸变化时怎么监听
DOM 本身没有原生的“尺寸变化事件”，得靠间接手段：
- 对窗口大小变化，用
window.addEventListener('resize', handler)——但只适用于整个 viewport，不响应单个元素尺寸变更 - 要监听某元素宽高变化，推荐使用
ResizeObserver（Chrome 64+/Firefox 69+/Safari 13.1+），它轻量、异步、不触发重排 - 不要用
setInterval轮询offsetWidth，开销大且不准；也不要依赖MutationObserver，它监听结构变化，不感知样式计算结果 - 示例：
const ro = new ResizeObserver(entries => {<br> for (const entry of entries) {<br> console.log(entry.contentRect.width);<br> }<br>});<br>ro.observe(document.getElementById('my-el'));
DOMContentLoaded 里取，可能样式还没应用完；在 load 里取，又可能图片还没加载导致高度塌陷。更稳妥的做法是结合 requestAnimationFrame 或等待 ResizeObserver 的首次回调。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
