前端开发中，我们经常会用到 CSS 的 transform 属性来实现各种动画效果。但是在使用 transform 属性时，我们有时会遇到一些奇怪的问题，比如元素的宽度和高度并不是我们期望的值。本文将深入探讨这个问题，并提供一些解决方案。
问题描述
在 CSS 中，width 和 height 属性通常用于定义元素的尺寸。然而，在使用 transform 属性时，元素的实际尺寸可能与我们所期望的不同。例如，考虑以下代码：
<div class="box"></div>
.box {
width: 100px;
height: 100px;
background-color: red;
transform: scale(0.5);
}在这个例子中，我们定义了一个宽高均为 100px 的红色方块，并使用 scale(0.5) 将其缩小了一半。根据我们的理解，这个方块的实际宽度和高度应该是 50px，但是如果我们使用 JavaScript 获取它的实际宽度和高度，我们会发现它们仍然是 100px。
这个问题的原因是，transform 并不会改变元素的布局盒模型（即它的尺寸和位置），它只会对元素进行视觉上的变换。因此，元素的实际尺寸仍然是未经过 transform 变换时的值。
解决方案
1. 使用 getBoundingClientRect 方法
要获取一个元素在视口中的实际尺寸，可以使用 Element.getBoundingClientRect() 方法。该方法会返回一个包含元素在视口中位置和尺寸信息的 DOMRect 对象。我们可以从这个对象中获取元素的实际宽度和高度。
const box = document.querySelector('.box');
const rect = box.getBoundingClientRect();
console.log(rect.width, rect.height); // 输出实际宽度和高度需要注意的是，getBoundingClientRect 方法返回的尺寸包括元素的边框和内边距，但不包括外边距和滚动条。
2. 使用 offsetWidth 和 offsetHeight 属性
另一种获取元素实际尺寸的方法是使用 Element.offsetWidth 和 Element.offsetHeight 属性。这两个属性返回的值与 getBoundingClientRect 方法类似，也包括元素的边框和内边距，但不包括外边距和滚动条。
const box = document.querySelector('.box');
console.log(box.offsetWidth, box.offsetHeight); // 输出实际宽度和高度需要注意的是，offsetWidth 和 offsetHeight 是只读属性，并且只能用于可见元素。如果元素设置了 display:none 或 visibility:hidden，它们将返回 0。
3. 自行计算实际尺寸
最后一种解决方案是手动计算元素的实际尺寸。在我们的例子中，由于我们使用了 scale(0.5)，因此可以将元素的宽度和高度除以 2 来得到它的实际尺寸。
const box = document.querySelector('.box');
const width = parseInt(getComputedStyle(box).width);
const height = parseInt(getComputedStyle(box).height);
const actualWidth = width / 2;
const actualHeight = height / 2;
console.log(actualWidth, actualHeight); // 输出实际宽度和高度需要注意的是，这种方法只适用于 transform 变换是等比缩放的情况。如果 transform 变换涉及到旋转或者 skew 等操作，手动计算实际尺寸会更加困难。
结论
在使用 transform 属性时，元素
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30979