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

確定HTML 元素的實際尺寸

當嘗試在瀏覽器視窗中對齊HTML 元素時，必須準確地取得其尺寸實際寬度和高度。這需要利用各種瀏覽器支援的特定屬性和函數。

.offsetWidth 和 .offsetHeight

要在不考慮 CSS 轉換的情況下確定元素的寬度和高度，請使用.offsetWidth 和 .offsetHeight 屬性。與 .style 不同，這些屬性可以在元素上直接存取。

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

getBoundingClientRect()

.getBoundingClientRect() 函數提供更精確的應用 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,
}

瀏覽器支援

Property/Function	Browser Support
.offsetWidth/.offsetHeight	All major browsers
getBoundingClientRect()	All major browsers except Internet Explorer 8 and below

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