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;