clientHeight、offsetHeight、scrollHeight三者区别与浏览器表现

提要

1. clientHeight指客户区高度，本应该返回浏览器可见区域高度，但是，前面的元素如果不是documentElement，则返回盒子高度（包括填充和边框）
2. offsetHeight指偏移之后的高度，offsetTop和offsetLeft分别指当前元素相对于父元素的偏移（也就是外边距），故offsetHeight则是指元素本身高度（包括填充和边框），不过，在IE11以下的版本，如果前缀元素是documentElement，返回的却是可见区高度。
3. scrollHeight指可滚动的高度，前缀元素必须有overflow属性来限制可见高度，否则会导致scrollTop总是为0，此元素也和offsetHeight类似，返回元素本身高度。但在chrome浏览器里，还会加上外边距。。。

测试

显示html及css代码：

.test{
	/*box-sizing: border-box;*/
	height: 5000px;
	width: 600px;
	margin: 30px auto;
	padding: 30px;
	border: 5px solid #888;
	}
<div class="test"></div>

再来js测试代码：

console.log(document.documentElement.clientHeight);
console.log(document.documentElement.offsetHeight);
console.log(document.documentElement.scrollHeight);
console.log(document.body.clientHeight);
console.log(document.body.offsetHeight);
console.log(document.body.scrollHeight);

然后分别在不同浏览器打开：
IE8-IE10：

IE11+：

chrome：

firefox：

在我参考别的博客过程中，我发现，这几个属性不仅在不同浏览器表现不同，在同一浏览器的不同版本表现也不同，IE可以切换文档渲染模式，而firefox和chrome不行，所以没有测试验证

总结

因为这三个系列的dom标准在各浏览器的各版本里实现方式均不同，所以W3C干脆就没有这三个系列的demo和演示（链接都没有）。我们只要记住，client开头的属性表示客户区可见参数，offset开头的表示元素实际属性，scroll开头的特指可滚动元素（隐藏起来的也算），这样具体用到了再去体会实际效果，否则记是记不住的~