如何在 JavaScript 中检索旋转元素的真实宽度和高度？

在旋转变换后检索宽度/高度

当您使用 CSS 对元素应用旋转变换时，元素的视觉外观可能会发生变化，但其宽度和高度的 JavaScript 属性可能不会反映此更改。

问题：

应用 45 度的旋转变换后，11x11 的正方形看起来是浏览器中为 17x17。但是，如果您尝试使用 JavaScript 检索宽度和高度属性，您仍然会得到原始值 (10x10)。

解决方案：

准确检索宽度和应用旋转变换后的高度，您可以使用 HTMLDOMElement 的 getBoundingClientRect() 方法。此方法返回一个具有正确高度和宽度的对象，同时考虑到变换矩阵。

<code class="javascript">const element = document.querySelector('.rotated-element');

const rect = element.getBoundingClientRect();

const width = rect.width;
const height = rect.height;</code>

此方法为您提供所需的结果 (17x17)，因为 getBoundingClientRect() 考虑了实际视觉尺寸旋转后的元素，而不仅仅是存储在元素属性中的原始值。

以上是如何在 JavaScript 中检索旋转元素的真实宽度和高度？的详细内容。更多信息请关注PHP中文网其他相关文章！