offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别

这些高度相信很多同学都搞不清楚吧。这里我通过本地测试，发现了区别。

以聊天窗口为例。

元素(class='content')高度444px,其中上下padding分别是10px,margin为0。距离最近的一个定位的父元素的上边距是60px。

这里，在控制台打印出各个高度值：

var c =document.getElementsByClassName('content')[0];
console.log(c.offsetTop,c.offsetHeight,c.clientHeight,c.scrollHeight,c.scrollTop);

默认情况下：

60 464 464 464 0

加了border(1px)之后

60 464 462 462 0

缩小窗口：

60 339 337 337 0

内容超出一面，出现滚动条：

60 464 464 710 246

内容超出一面，出现滚动条，且加了border(1px)之后：

60 464 462 710 246

由此可得出结论：

offsetTop 距离最近定位父元素的上外边距(margin)。

此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。

offsetHeight 是自身元素的高度（可视区）：元素内容+内边距(padding)+边框(border)，缩小浏览器窗口，这个值会改变

clientHeight 是自身元素的高度（可视区）：元素内容+内边距(padding)，缩小浏览器窗口，这个值会改变

scrollHeight = 容器元素的上下内边距(padding)之和 + 内容所占据的宽度(含隐藏的)，值最小等于元素的clientHeight属性值。

scrollTop = 没有滚动条时是0。为scrollHeight - offsetHeight的差。

回到示例，想让有消息来了，自动滚动最后一条消息，做法是：

var c =document.getElementsByClassName('content')[0];
c.scrollTop = c.scrollHeight - c.offsetHeight;

当然，这里的offsetHeight不减去也是可以的。

其它的offsetLeft,offsetWeight,clientWidth,scrollWidth,scrollLeft同理。

jQuery里也有获取高度的方法：

innerHeight()获取第一个匹配元素内部区域高度（包括补白、不包括边框）。同clientHeight

outerHeight([options])获取第一个匹配元素外部高度（默认包括补白和边框）。同offsetHeight

scrollTop([val]) 同scrollTop

offset()返回{left: 0, top: 60, width: 587, height: 464}，对应offsetLeft,offsetTop,offsetWidth,offsetHeight

height()获取或者设置offsetHeight

position() 获取匹配元素相对父元素的偏移

参考：

scrollTop、offsetHeight和offsetTop等属性用法详解-蚂蚁部落

http://www.softwhy.com/forum.php?mod=viewthread&tid=8298