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;