1. 程式人生 > >淺談style.height、clientHeight、offsetHeight、scrollHeight

淺談style.height、clientHeight、offsetHeight、scrollHeight

對象 cells class 只讀 info align padding window init

先分別介紹以下,以下資料來自MDN

HTMLElement.offsetHeight 是一個只讀屬性,它返回該元素的像素高度,高度包含該元素的垂直內邊距和邊框,且是一個整數。

技術分享圖片

Element.clientHeight 是一個只讀屬性,它返回該元素的像素高度,高度包含該元素的垂直內邊距和邊框,且是一個整數。

技術分享圖片

Element.scrollHeight 是一個只讀屬性,是一個元素內容高度的度量,包括由於溢出導致的視圖中不可見內容

技術分享圖片

style.height

clientHeight

offsetHeight

scrollHeight

所屬對象

Object

Element

HTMLElement

Element

獲取高度

內聯樣式高度

元素高度+內邊距

元素高度+內邊距+邊框+滾動條

元素高度+內邊距+偽元素

不包含滾動條

不包含偽元素

出現滾動條

可見部分高度

元素所有部分

讀寫屬性

讀寫

只讀

只讀

只讀

淺談style.height、clientHeight、offsetHeight、scrollHeight