元素缩放后getComputedStyle与getBoundingClientRect宽度差异原因及正确性分析

当父元素设置transform: scale()变换后，使用getComputedStyle和getBoundingClientRect获取子元素宽度时会出现结果差异，以下是问题的原因解析和结果说明：

差异原因 #

• getComputedStyle：返回的是元素的计算样式尺寸，完全基于CSS盒模型规则计算，只考虑元素自身及父元素的CSS属性（如width、padding等），不会纳入任何CSS变换（包括父元素的scale）的影响。它代表的是元素在布局层面的原始尺寸，和视觉渲染后的大小无关。
• getBoundingClientRect：返回的是元素在视口中的实际视觉尺寸与位置，会将所有CSS变换（包括父元素的缩放、旋转等）的效果计算在内。因为transform属于视觉层面的变换，仅改变元素的渲染显示，不会修改元素的计算样式，所以这个方法得到的是元素缩放后的真实显示宽度。

哪个结果正确？ #

没有绝对的“正确”，取决于你的使用场景：

• 若需要获取元素在CSS定义中的布局原始宽度，getComputedStyle的结果符合需求；
• 若需要获取元素在屏幕上实际显示的视觉宽度，getBoundingClientRect的结果是正确的。

最小复现代码 #

HTML #

<div id="parent">
  <div>
    <div id="child">
      child
    </div>
  </div>
</div>

CSS #

#parent {
  width: 500px;
  transform: scale(2);
  transform-origin: 0 0;
}

#child {
  background: yellow;
}

JavaScript #

const child = document.getElementById("child");
const getComputedStyleWidth = getComputedStyle(child).width;
const getBoundingClientRectWidth = child.getBoundingClientRect().width;

const span = document.createElement("span");
span.innerText = `
  width for getComputedStyle: ${getComputedStyleWidth}
  width for getBoundingClientRect: ${getBoundingClientRectWidth}
`;
document.body.appendChild(span);

内容的提问来源于stack exchange，提问作者lai9fox