如何获取应用transform后元素在视口中的实际显示尺寸？

问题根源 #

当元素应用transform缩放变换时，offsetWidth、offsetHeight、scrollWidth、scrollHeight这类属性返回的是元素未经过变换的原始尺寸，这就是你拿到的值和视口显示尺寸不符的原因。

解决方案 #

方案1：直接使用getBoundingClientRect() #

getBoundingClientRect()方法会返回元素经过CSS变换后的实际占位尺寸，直接读取返回对象的width和height属性即可：

onload: function () {
  const element = document.getElementById("element");
  const rect = element.getBoundingClientRect();
  console.log("实际显示尺寸：", rect.width, rect.height);
}

如果之前调用这个方法得到的值不准确，大概率是代码执行时机过早（比如元素变换还未完全渲染生效），确保在图片加载完成、样式应用完毕后调用即可。

方案2：通过变换矩阵计算 #

从元素的计算样式中提取缩放比例，再乘以原始尺寸得到实际显示大小：

onload: function () {
  const element = document.getElementById("element");
  // 获取计算后的transform样式
  const computedTransform = window.getComputedStyle(element).transform;
  // 解析matrix中的缩放因子（matrix(a,b,c,d,e,f)里的a是X轴缩放，d是Y轴缩放）
  const [scaleX, , , scaleY] = computedTransform.match(/matrix\(([^)]+)\)/)[1].split(',').map(parseFloat);
  
  // 原始尺寸乘以缩放比例得到实际尺寸
  const actualWidth = element.offsetWidth * scaleX;
  const actualHeight = element.offsetHeight * scaleY;
  console.log("实际显示尺寸：", actualWidth, actualHeight);
}

补充说明 #

• 无论transform-origin设置为何值，上述两种方案都能正确计算实际显示尺寸。
• 优先使用方案1，因为它直接获取浏览器渲染后的最终尺寸，不需要手动解析变换矩阵，更可靠。

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