document.documentElement.clientHeight 和 document.body.clientHeight
介绍
在进行一些网页效果处理的时候，经常碰到document.documentElement.clientHeight和document.body.clientHeight。
百度随便一查，经常碰到有人将二者混为一谈。
但是二者之间还是有着很大区别的。
document.documentElement.clientHeight 可以称为是获取的可视区域的高度，而document.body.clientHeight则获取的是网页body的高度。
整个document.documentElement.clientHeight的高度与window.innerHeight的高度差了一个横向的滚动条，如果网页当中不包括横向滚动条的话，二者是相同的。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="height: 1000px;"></div>
<button id="btn">点击</button>
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.onclick = function() {
console.log('innerHeight:' + window.innerHeight)
console.log('clientHeight:' + document.documentElement.clientHeight)
console.log('documentbody:' + document.body.clientHeight)
}
</script>
</html>
输出的结果为:
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的值自然也就相等了。