offsetHeight、clientHeight、scrollHeight、offsetLeft

平時開發時候遇到計算DOM元素位置的時候，offsetHeight、clientHeight、scrollHeight常常混淆每次都要查MDN，此次索性把這幾個屬性統一整理一下。

offsetHeight & offsetWidth

說明

HTMLElement.offsetHeight

• 只讀
• 返回元素的佈局高度(layout height)
• 值 = contentH + paddingH + borderH
• display:none時，值爲0
• 不包含僞類(::before ::after)的高度
• 值的數據類型爲數字

圖示

clientHeight & clientWidth

說明

Element.clientHeight

• 只讀
• 返回元素的內部高度
• 一個元素沒有css或者這個元素是內聯元素時，返回 0
• 值 = contentH + paddingH - scrollbarH (if present)

圖示

scrollHeight & scrollWidth

說明

• 只讀
• 返回元素的高度，包括不可見的溢出部分
• 包含僞類的高度(::after,::before等)
• 若是沒有滾動條的話，和clientHeight相等

圖示

判斷是否滾到最底部

const isRead = HTMLElement.scrollHeight - HTMLElement.scrollTop === HTMLElement.clientHeight;
複製代碼

offsetParent & offsetLeft & offsetTop

offsetParent

HTMLElement.offsetParent

• 只讀
• 返回最近的設置過position的祖先元素
• 若是當前元素沒有設置過position，會返回最近的td、th、table、body
• 當該元素的display爲none時候，offsetParent 返回 null

offsetLeft & offsetTop

• 只讀
• 對於塊狀元素，offsetLeft 和 offsetTop 描述的是當前元素的border外側 距offsetParent的border內側的距離，和scroll無關
• 對於內聯元素，offsetLeft 和 offsetTop 描述的是當前元素的border外側 距offsetParent的border外側的距離，和scroll無關

圖示