scrollHeight,clientHeight,offsetHeight的区别

说明：

scrollHeight：DOM元素的实际内容的高度，不包border的高度，会随DOM元素中内容的增加(超过可视区后)而变大。

clientHeight：DOM元素内容可视区的高度，不包含滚动条和边框的高度。

offsetHeight：DOM元素整体的高度，包括滚动条和边框。

当滚动条不出现的时候

这时候DOM元素中没有内容或者内容不超过可视区 scrollWidth=clientWidth，两者皆为可视区的宽度。 scrollHeight=clientHeight,两者皆为可视区的高度。 offsetWidth、offsetHeight为DOM元素的整体宽度和高度。

当滚动条出现的时候

这时候DOM元素中没有内容或者内容不超过可视区 scrollWidth>clientWidth scrollHeight>clientHeight scrollWidth和scrollHeight分别是实际内容的宽度和高度 clientWidth和clientHeight分别是内容可视区的宽度和高度 offsetWidth、offsetHeight为DOM元素的整体宽度和高度。

Demo:

利用JS获取DOM元素的大小

获取html根元素：document.documentElement 获取body元素：document.body

获取页面可视区的宽度和高度，不包括滚动条 IE、FF、chrome中采用： 使用document.documentElement.clientWidth和document.documentElement.clientHeight 注意：ie6标准模式下，上述方式可以

在混杂模式下： ie6使用document.body.clientWidth和document.body.clientHeight 注意： window.innerWidth/Height是包括滚动条的宽度和高度的。这也与document.documentElement.clientWidth/Height的区别所在。 所以在使用的时候注意兼容写法：

Demo