如何用 window.getComputedStyle 获取由 CSS 动态计算出的元素宽度-js教程-PHP中文网

getcomputedstyle 返回的 width 是元素的计算后宽度（computed value），单位 px，仅反映 css width 属性经浏览器解析后的逻辑值，不包含 padding、border、margin，且不受 box-sizing 影响。

如何用 window.getcomputedstyle 获取由 css 动态计算出的元素宽度

getComputedStyle 返回的 width 是什么值

window.getComputedStyle 拿到的 width 是元素的**计算后宽度（computed value）**，单位是 px，但它是 CSS 层面的“逻辑宽度”——不包含 padding、border、margin，也不反映 box-sizing 差异带来的实际占位变化。它只反映样式规则 + 浏览器默认计算后的结果，和你在开发者工具“Computed”面板里看到的 width 一致。

常见误解：以为它等同于 offsetWidth 或 clientWidth。其实不是：offsetWidth 包含 padding + border（按 box-sizing 决定），clientWidth 只含 padding（不含 border 和 scrollbar）。而 getComputedStyle(el).width 只是你写的 width 值经浏览器解析后的像素数，哪怕写的是 width: 50%，它也会算出具体 px 值（前提是父容器宽度已确定）。

必须确保元素已 layout 才能拿到正确值

如果元素刚插入 DOM 但尚未触发 layout（比如在 document.createElement 后立刻调用），或处于 display: none、visibility: hidden 状态，getComputedStyle 的 width 可能返回 auto 或异常值（如 0px），尤其在百分比、fit-content 等依赖布局上下文的场景下。

确保元素已挂载到 document 中（el.parentNode !== null）
避免在 display: none 的祖先节点内调用；可临时设为 visibility: hidden + position: absolute + left: -9999px 来隐藏但保留 layout
若在 Vue/React 的 effect 或 useLayoutEffect 外调用，可能因异步渲染未完成而取到旧值

获取真实渲染宽度推荐组合：getComputedStyle + clientWidth

想获得“用户实际看到的内容区宽度”（含 padding，不含 border 和 scrollbar），直接读 clientWidth 更可靠；若需精确分离 width/padding/border，则用 getComputedStyle 分别取 width、paddingLeft、paddingRight、borderLeftWidth、borderRightWidth，再手动相加。

例如获取内容区总宽（等效 clientWidth）：

const cs = getComputedStyle(el);
const w = parseFloat(cs.width);
const pl = parseFloat(cs.paddingLeft);
const pr = parseFloat(cs.paddingRight);
const totalContentWidth = w + pl + pr;

注意：parseFloat 必须用，因为 cs.width 是字符串（如 "123.45px"）；若值为 "auto"，parseFloat 返回 NaN，需兜底处理。

box-sizing 对 getComputedStyle.width 的影响很隐蔽

getComputedStyle(el).width 的值**始终对应 CSS 中定义的 width 属性含义**，不受 box-sizing 影响——也就是说，即使 box-sizing: border-box，它返回的仍是你设置的 width 值（比如 width: 200px），而不是“减去 padding 和 border 后的内容宽”。这个值不会自动调整。

所以不能靠它反推内容区大小。容易踩坑的场景：

设置了 width: 200px; padding: 10px; box-sizing: border-box → getComputedStyle(el).width 仍是 "200px"，但 clientWidth 是 200（含 padding）
同上但 box-sizing: content-box → clientWidth 是 220（200 + 10 + 10），getComputedStyle 还是 "200px"