offsetWidth、clientWidth、scrollWidth、scrollTop

offsetWidth/clientWidth/scrollTop…

题记：offset/client/scroll 这几组属性容易搞混，查了些资料，研究了下，写些心得。

1. 基本概念

offsetWidth/offsetHeight

对象的可见宽度，包含滚动条和border。非标准属性，但各浏览器都支持

clientWidth/clientHeight

对象的可见宽度，不包含滚动条和border。

scrollWidth/scrollHeight（慎用）

元素完整的高度和宽度，overflow:hidden的部分也计算在内。

offsetLeft/offsetTop

当前元素距浏览器边界的偏移量，以像素为单位。

clientTop/clientLeft

这个属性测试下来的结果是=border。

scrollLeft/scrollTop（IE6计算方式不同）

设置或返回已经滚动到元素的左边界或上边界的像素数。

2. 比较offsetHeight/clientHeight/scrollHeight

共同点：3个值都和元素的margin无关。
差 异：offsetHeight = height+padding+border
      clientHeight = height+padding-滚动条的宽度(如果有滚动条)
      scrollHeight 获得的是元素的实际宽度影藏的部分也计算在内
备 注：1.Jquery中的css("height")/height()不计算padding/border/滚动条。
      2.offsetWidth、clientWidth、scrollWidth同理。

3. 比较offsetTop/clientTop/scrollTop

offsetTop：元素相对body的Top值（元素border以外到body.padding以内）
clientTop = offsetTop-(height+padding)=border
scrollTop：元素的滚动值 （可用来做滚动效果）