如何在 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中文網其他相關文章！