区分概念：clientWidth/clientHeight/offsetWidth/offsetHeight/scrollLeft/scrollTop/scrollHeight/scrollWidth...

1、 offsetWidth offsetHeight

　　元素在页面中可视部分的宽度和高度总计（margin除外）。

　　若CSS中没有指定元素的高度和宽度(即自适应)，所有浏览器都会显示实际的值包括width + padding + border（注意：不包含margin;滚动条是包含在内容width里面的。）

2、 scrollTop 和 scrollLeft

　　scrollTop和scrollLeft属性给出元素已经滚动的距离（像素值）。当你设置这些属性的时候，页面滚动到新的坐标。

3、clientWidth clientHeight(存在兼容问题)

　　元素的可视部分的宽度和高度。它们不把边框和滚动条计算在内，也不包括任何可能的滚动。

例如clinentWidth计算为：CSS的width属性（内容宽度）加上 padding 再减去滚动条的width（因为滚动条的高度是计算在css的width中的，这个宽度在1680*1050分辨率下在firefox中为17px）。

若CSS中没有指定元素的高度和宽度(即自适应)，则IE中显示0，而非IE浏览器则显示实际的值。

　

4、 scrollWidth scrollHeight（存在兼容性问题，尽量不用）

　　给出设置了overflow:visible的元素总的宽度和高度。如果这个宽度和高度大于clientWidth和clientHeight，该元素就需要滚动条。

　　width + padding + border

　　overflow:hidden/scroll 时 ，所有浏览器都会返回该元素的全部显示时的值

　　overflow:visible 时，google chrome、Safari、IE会显示元素全部显示时的值，而FF、Opera会显示应当显示的区域的值

　　该属性有很多的Bug，所以在具体应用时，用处很少。

 

　5、　图

修改更正自http://wangjianwei866.blog.163.com/blog/static/92958232009113111200261/

转载于:https://www.cnblogs.com/ginowang42/archive/2012/02/28/2371692.html