document.documentElement.clientHeight 和 document.body.clientHeight

document.documentElement.clientHeight 和 document.body.clientHeight

介绍

在进行一些网页效果处理的时候，经常碰到document.documentElement.clientHeight和document.body.clientHeight。

百度随便一查，经常碰到有人将二者混为一谈。

但是二者之间还是有着很大区别的。

document.documentElement.clientHeight 可以称为是获取的可视区域的高度，而document.body.clientHeight则获取的是网页body的高度。

整个document.documentElement.clientHeight的高度与window.innerHeight的高度差了一个横向的滚动条，如果网页当中不包括横向滚动条的话，二者是相同的。

例如：

    
    


    

    点击

输出的结果为:

innerHeight: 732 
clientHeight: 732 
document.body: 1024

通过谷歌浏览器的控制台可以发现，document.body.clientHeight的高度是等同于body的高度的。

下面是在JavaScript标准参考教程的说明：

html,body{height:100%}

经常碰到很多人将代码写成下面这个样子:

var a = document.documentElement.clientHeight || document.body.clientHeight

二者的值本是不等，那么如何能采用这种写法呢？

或者换句话说，想要采用上面这种兼容性的写法，就需要让二者的值相等，那么如果做到呢？

如果在css当中，设置了下面的属性:

html,body {
    height:100%;
}

那么document.documentElement.clientHeight和document.body.clientHeight的高度就会变得相同。

为什么呢?

document.documentElement.clientHeight中的documentElement表示的是根节点html,整个代码的意思是获取根节点html当中可视区域的高度。

而document.body.clientHeight中的body表示的是网页内容，获取的是整个网页内容的高度。

而上面的css代码则是将二者的高度设置为相等。经过这样的设置之后，document.documentElement.clientHeight和document.body.clientHeight的值自然也就相等了。