clientHeight—scrollHeight—offsetHeight三者的區別

 

　　clientHeight，scrollHeight，offsetHeight 這三個dom屬性有時讓人覺得相似但又不相似

　　以前對它們的理解也有一些模糊，現在總結一下，方便以后復習

 

　　clientHeight：可視區域高度，也可理解為設備屏幕一屏的高度（不包括滾動條和工具欄）

　　

 

　　scrollHeight：實際內容高度（不包括滾動條和工具欄）

　　　　　　　　　 若內容超出后出現滾動條，拉到底部，底部到頂部的高度就是scrollHeight，若內容沒有超出，則scrollHeight=clientHeight

　　　　　　　　　 如下動圖控制台所示，clientHeight = 939，而scrollHeight = 3880，即藍色區域所有內容的高度　　

　　

 　　offsetHeight： 元素的實際高度（實際高度=border+padding+height）

 　　比如下圖body的clientHeight和scrollHeight都為939，而offsetHeight為126

 　　

 

 　　加上1像素border后，高度變為128

　　

 

 　　加上10像素的padding后，高度變為148

　　

 

 　　

　　補充：

　　①：下面2種方式都可獲得元素垂直滾動的距離，但不同瀏覽器中不是2種方法都支持，

　　　　比如谷歌支持第1種（document.documentElement.scrollTop），所以第2種（document.body.scrollTop）獲取滾動距離為0

　　

　　②：一般獲取瀏覽器clientHeight，scrollHeight，offsetHeight，scrollTop等屬性會有一個兼容性寫法，

　　　　瀏覽器會自動匹配下面任意一種方式，若只寫其中一種，則可能報錯。固一般推薦下面寫法

　　var w = document.documentElement.offsetWidth || document.body.offsetWidth;
    var h = document.documentElement.offsetHeight || document.body.offsetHeight;