如何在 JavaScript 中获取转换后的 HTML 元素的准确宽度和高度？

确定转换后的宽度和高度

当对 HTML 元素应用旋转等转换时，JavaScript 的默认方法可能无法准确检索转换后的内容宽度和高度。

问题：

应用旋转变换（例如，旋转（45deg））后，元素可能看起来具有不同的尺寸（例如，正方形显示为矩形）。但是，宽度和高度等 JavaScript 属性仍然返回原始未转换的值。

解决方案：

要检索转换后的真实尺寸，请使用 getBoundingClientRect() 方法HTMLDOMElement。

<code class="javascript">const element = document.getElementById('element');

// Apply the transformation
element.style.transform = 'rotate(45deg)';

// Get the transformed dimensions
const dimensions = element.getBoundingClientRect();

console.log('Transformed Width:', dimensions.width);
console.log('Transformed Height:', dimensions.height);</code>

此方法在考虑转换矩阵后返回一个包含元素尺寸的对象。

示例：

A 11x11 的正方形在 Chrome 中旋转 45 度后就变成了 17x17 的矩形。 getBoundingClientRect() 方法准确报告 17x17 尺寸，而原始宽度和高度属性仍然返回 11x11。

以上是如何在 JavaScript 中获取转换后的 HTML 元素的准确宽度和高度？的详细内容。更多信息请关注PHP中文网其他相关文章！