如何計算 HTML 元素的實際尺寸
確定 HTML 元素的準確寬度和高度對於正確對齊它至關重要。本文探討了檢索實際尺寸的各種技術,並提供了不同瀏覽器之間的相容性詳細資訊。
.offsetWidth 和 .offsetHeight
概念:這些屬性表示一個元素,包括填充和
範例:
1 | var width = document.getElementById( 'foo' ).offsetWidth;
|
登入後複製
瀏覽器支援:所有主流瀏覽器
.getBoundingClientRect()
概念:這個方法傳回一個包含各種尺寸和座標的 DOMRect 對象,包括應用 CSS 轉換後的寬度和高度。
範例:
1 | console.log(document.getElementById( 'foo' ).getBoundingClientRect())
|
登入後複製
輸出:
1 2 3 4 5 6 7 8 9 10 | 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中文網其他相關文章!