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