HTML不提供计算值属性，计算值由CSS引擎在渲染时确定；style和class仅提供初始样式，需用getComputedStyle()等JS方法在布局完成后获取实际值。
HTML 本身不提供“计算值”属性——所谓“文档的计算值”，是 CSS 引擎在渲染时算出来的，HTML 只负责提供初始值和结构。
为什么 style 和 class 都不能直接拿到计算值
你写 <div style="width: 50%">，浏览器最终显示的像素宽度取决于父容器、缩放、DPR、是否在 iframe 里……这些全在 CSS 计算阶段才确定。HTML 标签里没有 computed-width 这种属性，也永远不会有。
-
style属性只读取内联样式字符串，不触发计算 -
class只是选择器挂钩，样式规则本身在 CSSOM 里，和 HTML 元素分离 - 想拿到
offsetWidth或getComputedStyle(el).width，必须用 JS 主动查，且得等布局完成（比如不在document.write过程中调）
getComputedStyle() 是唯一靠谱的入口，但时机很关键
它返回的是当前渲染树里的实际值，但前提是元素已挂载、样式已应用、布局未被阻塞。
- 在
DOMContentLoaded后调用通常安全；在document.body还没创建时调，会报TypeError: Cannot read property 'getComputedStyle' of null - 对
display: none的元素调用，width/height返回"0px"，但offsetWidth是0，二者语义不同 - 注意单位：返回值总是带单位的字符串（如
"42.5px"），不能直接参与数学运算，要parseFloat()提取数值
别试图用 clientWidth / offsetWidth 替代 getComputedStyle
它们看起来更“快”，但代表的意义完全不同：
立即学习“前端免费学习笔记（深入）”；
-
offsetWidth包含 border + padding + width（content-box），但不含 margin，也不反映 transform 缩放效果 -
clientWidth排除 border 和滚动条，但对box-sizing: border-box下的元素，和getComputedStyle的width值可能不一致 - 如果元素被
transform: scale(0.5)缩小，getComputedStyle的width不变，但视觉尺寸和getBoundingClientRect()才反映真实占位
真正难的不是怎么取值，而是判断该取哪个值——width？boundingClientRect.width？还是 scrollWidth？这取决于你到底要解决什么问题：是适配容器、做动画基准，还是校验响应式断点。没想清楚这点，代码写得再“对”，结果也可能错得离谱。
