如何在 JavaScript 中获取旋转元素的准确尺寸？

确定旋转后的元素尺寸

问题：应用像transform:rotate(45deg);这样的转换后，获得准确的宽度和高度属性因为旋转的元素可能具有挑战性。传统方法可能仍会报告原始尺寸，而不是实际转换后的尺寸。

解决方案：要检索转换后的宽度和高度，请利用 HTMLDOMElement 的 getBoundingClientRect()。此方法返回一个对象，其中包含元素渲染框的基本属性，包括其真实高度和宽度，无论应用的转换如何。

示例实现：

考虑以下内容HTML 和 JavaScript：

<code class="html"><div id="my-div" style="width: 10px; height: 10px;">
</div></code>

<code class="javascript">const div = document.getElementById('my-div');
div.style.transform = 'rotate(45deg)';

const rect = div.getBoundingClientRect();

console.log(`Rotated dimensions: ${rect.width} x ${rect.height}`);</code>

此代码片段检索 getBoundingClientRect() 方法报告的元素的旋转尺寸。在这种情况下，输出将为 17 x 17，反映旋转正方形的实际宽度和高度。

以上是如何在 JavaScript 中获取旋转元素的准确尺寸？的详细内容。更多信息请关注PHP中文网其他相关文章！