offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别

@date:2016-04-27 15:20:00

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

以聊天窗口为例。

元素(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

Build by Loppo 0.6.14