開發中經常遇到使用scrollHeight、scrollTop、clientHeight、offsetHeight等的情況，網上有眾多關于這些屬性的解釋，但是并不全面和直觀，現在將這些屬性結合圖例整理如下，方便日后查閱：

DOM元素對象

clientHeight	返回當前元素在頁面上的可視高度（包括padding；不包括border、margin、滾動條高度）	單位px
clientWidth	返回當前元素在頁面上的可視寬度（包括padding；不包括border、margin、滾動條寬度）	單位px
offsetHeight	返回當前元素在頁面上的可視高度（包括padding、border、滾動條高度；不包括margin）	單位px
offsetWidth	返回當前元素在頁面上的可視寬度（包括padding、border、滾動條寬度；不包括margin）	單位px
scrollHeight	返回當前整個元素的高度（包括帶滾動條的隱蔽的地方）	單位px
scrollWidth	返回當前整個元素的寬度（包括帶滾動條的隱蔽的地方）	單位px
scrollTop	?clientHeight的頂部到scrollHeight頂部的高度	單位px
scrollLeft	?clientWidth左邊緣到offsetWidth左邊緣的距離	單位px
offsetTop?	指當前元素距離上方或上層元素的距離	單位px
offsetLeft?	指當前元素距離左邊或上層元素左邊的距離	單位px

參考資料

http://www.runoob.com/jsref/dom-obj-all.html

https://www.jianshu.com/p/d267456ebc0d

轉載于:https://www.cnblogs.com/Zhangzhiwei-0/p/9765909.html

總結

以上是生活随笔為你收集整理的scrollHeight、clientHeight、offsetHeight、scrollTop等的定义以及图解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。