如何準確地確定 HTML 元素的尺寸？

如何計算 HTML 元素的實際尺寸

確定 HTML 元素的準確寬度和高度對於正確對齊它至關重要。本文探討了檢索實際尺寸的各種技術，並提供了不同瀏覽器之間的相容性詳細資訊。

.offsetWidth 和 .offsetHeight

概念：這些屬性表示一個元素，包括填充和

範例：

var width = document.getElementById('foo').offsetWidth;

瀏覽器支援：所有主流瀏覽器

.getBoundingClientRect()

概念：這個方法傳回一個包含各種尺寸和座標的 DOMRect 對象，包括應用 CSS 轉換後的寬度和高度。

範例：

console.log(document.getElementById('foo').getBoundingClientRect())

輸出：

DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}

瀏覽器支援：

• 桌上型瀏覽器：Chrome、Edge、Firefox、Safari
• 行動瀏覽器：Android版Chrome、iOS Safari

以上是如何準確地確定 HTML 元素的尺寸？的詳細內容。更多資訊請關注PHP中文網其他相關文章！