決定轉換後的寬度和高度
當對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中文網其他相關文章！
