首頁 > web前端 > js教程 > 如何準確地確定 HTML 元素的尺寸?

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

Linda Hamilton
發布: 2024-12-07 05:54:13
原創
239 人瀏覽過

How Can I Accurately Determine the Dimensions of an HTML Element?

如何計算 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板