scrollHeight、clientHeight ,offsetHeight 差异 _Web前端

scrollHeight、clientHeight ,offsetHeight 区别

我认为我们想要两个东西：

一是?scrollWidth（scrollHeight），虽然它用处不大，但应该比 offsetWidth（offsetHeight）有用得多。它表示的是文档区的宽度（高度），比如一个网页，特别是门户网站，拖很长，就要把没有显示出来的内容都计算进去。
二是视口 viewport，就是?clientWidth，就是窗口中可显示内容的那块区域，就是我们常常看到页面上飞行广告，飞来飞去，碰到边边要反弹的那一块。

测试结果

结果很复杂，就不说了，这里只说实际中怎么使用：

要使用 scrollWidth，取 document.documentElement.scrollWidth 与 document.body.scrollWidth 的最大值；
要使用 clientWidth，如果 document.documentElement.clientWidth > 0，则使用 document.documentElement.clientWidth，否则使用 document.body.clientWidth。

表达式为：

var scrollWidth =?Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

clientHeight
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

内容可视区域是指浏览器最后一个工具条以下到状态栏以上的区域，与页面内容无关，如有滚动条的话则排除滚动条所占的区域

offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

IE和Opera下该值一直等于document.body.clientHeight+滚动条高度+窗口边框（IE为4，Opera为0）

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

//-----------------------------以上是摘自网友博客----------------------------------------

//原文博客地址：http://www.cnblogs.com/wang726zq/archive/2012/05/10/2494256.html

//终极自测方法：需要JSLogger组件，请到日志首页自行下载。

window.onload = function(){

JSLogger.log("documentElement 的属性 ");

JSLogger.log(document.documentElement,"height");

JSLogger.log("body 的属性 ");

JSLogger.log(document.body,"height");

}