如何在 JavaScript 中取得轉換後元素的準確寬度和高度？

檢索變換後的寬度和高度

對元素應用諸如旋轉（45deg）之類的變換時，該元素的視覺尺寸改變。然而，JavaScript 中的 width 和 height 屬性仍然反映原始未轉換的尺寸。

解：使用 getBoundingClientRect()

要取得轉換後更新的尺寸，請使用HTMLDOMElement 上的 getBoundingClientRect() 方法。此方法傳回一個包含轉換後的高度和寬度的物件。

範例：

<code class="javascript">// Get the element
const element = document.querySelector('.transformed');

// Calculate the rotated dimensions
const rect = element.getBoundingClientRect();

// Access the rotated width and height
const rotatedWidth = rect.width;
const rotatedHeight = rect.height;</code>

示範：

造訪這個jsFiddle 是一個實際範例：https://jsfiddlefiddle .net/your_url_here

注意： 此方法將為您提供整個元素的尺寸，包括任何邊框或填充。如果您只需要計算內容尺寸，則應在元素的內容元素上使用 offsetWidth 和 offsetHeight（例如，轉換後的元素中的

）。

以上是如何在 JavaScript 中取得轉換後元素的準確寬度和高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！