元素的寬高問題

2021-09-10 12:11:49 字數 854 閱讀 7098

1.元素尺寸的相關概念

下面的內容會牽扯到各類包含「尺寸」字樣的名詞,為了大家在閱讀的時候不產生困擾,

這裡專門把相關概念梳理一下。

我們這裡的各類「尺寸」命名和對應的盒子型別全部參考自 jquery 中與尺寸相關 api 的名稱。

• 元素尺寸:對應 jquery 中的$().width()和$().height()方法,包括 padding

和 border,也就是元素的 border box 的尺寸。在原生的 dom api 中寫作 offsetwidth

和 offsetheight,所以,有時候也成為「元素偏移尺寸」。

• 元素內部尺寸:對應 jquery 中的$().innerwidth()和$().innerheight()方法,

表示元素的內部區域尺寸,包括 padding 但不包括 border,也就是元素的 padding

box 的尺寸。在原生的 dom api 中寫作 clientwidth 和 clientheight,所以,

有時候也稱為「元素可視尺寸」。

• 元素外部尺寸:對應 jquery 中的$().outerwidth(true)和$().outerheight

(true)方法,表示元素的外部尺寸,不僅包括 padding 和 border,還包括 margin,

也就是元素的 margin box 的尺寸。沒有相對應的原生的 dom api。

「外部尺寸」有個很不一樣的特性,就是尺寸的大小有可能是負數,沒錯,負尺寸。這和我們現

實世界對尺寸的認知明顯衝突了,因為現實世界沒有什麼物體的尺寸是負的。所以,我總是把「外部

尺寸」理解為「元素佔據的空間尺寸」,把概念從「尺寸」轉換到 「空間」,這時候就容易理解多了。

獲取元素寬高

獲取元素寬高值 1.內聯樣式.element.style讀取的只是元素內聯樣式,即寫在元素的 style 屬性上的樣式,支援讀寫.var elebox document.getelementbyid eleid var h elebox.style.height 外聯樣式 巢狀樣式無法通過上述方法直...

獲取元素高寬

element.clientwidth屬性表示元素的內部寬度,以畫素計。該屬性包括內邊距,但不包括垂直滾動條 如果有 邊框和外邊距 element.getboundingclientrect width有內邊距和邊框,無外邊距 element.style.width 只能去內聯樣式的寬window....

元素的寬高自適應

寬高自適應 網頁布局中經常要定義元素的寬和高,但很多時候我們希望元素的大小能夠根據視窗或者子元素的大小來自動調整,這時候就要用到自適應了。元素自適應在網頁布局中非常重要,它能夠使網頁顯示更加靈活,可以適應在不同裝置 不同視窗 不同解析度下顯示。下面來介紹下不同情況下自適應的寫法 一 相對視窗和父元素...