開發(fā)中經(jīng)常遇到使用scrollHeight、scrollTop、clientHeight、offsetHeight等的情況，網(wǎng)上有眾多關(guān)于這些屬性的解釋，但是并不全面和直觀，現(xiàn)在將這些屬性結(jié)合圖例整理如下，方便日后查閱：

DOM元素對(duì)象

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

參考資料

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/Zhangzhiwei-0/p/9765909.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。