首頁 > web前端 > js教程 > 如何取得 HTML 元素的寬度和高度以實現精確居中?

如何取得 HTML 元素的寬度和高度以實現精確居中?

Linda Hamilton
發布: 2024-12-04 01:25:12
原創
740 人瀏覽過

How Can I Get the Width and Height of an HTML Element for Precise Centering?

計算居中的 HTML 元素寬度和高度

要將 HTML 元素在瀏覽器顯示中居中,確定其實際寬度和高度至關重要。以下是實現此目標的方法:

1. .offsetWidth 和.offsetHeight 屬性

您可以使用以下方法檢索元素的偏移寬度和高度:

var width = document.getElementById('foo').offsetWidth;
登入後複製

2。 。 >

.offsetWidth和.offsetHeight:
console.log(document.getElementById('foo').getBoundingClientRect())

/* Output:
DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}
*/
登入後複製
所有主流瀏覽器 (IE8)

.getBoundingClientRect():

所有主流瀏覽器 (IE9)

以上是如何取得 HTML 元素的寬度和高度以實現精確居中?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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