document.documentElement.clientHeight 和 document.body.clientHeight

document.documentElement.clientHeight 和 document.body.clientHeight

介绍

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

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

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

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

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

例如:




    
    Document


    

输出的结果为:

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.clientHeightdocument.body.clientHeight的高度就会变得相同。

为什么呢?

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

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

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

你可能感兴趣的:(document.documentElement.clientHeight 和 document.body.clientHeight)