这些高度相信很多同学都搞不清楚吧。这里我通过本地测试，发现了区别。
以聊天窗口为例。
元素(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.offsetH
当然，这里的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等属性用法详解-蚂蚁部落
阅读(...) 评论()关于pageYOffset scrollY scrollTop的小结
来源：博客园
pageYOffset是window对象，适用于FF，chrome，IE9+，opera等多浏览器支持(其实是针对ie8和ie9之下的ie)同时 忽略Doctype 定义规则，也即是DTD说明。 window.pageYO　　//用法,在 ie8以及ie8 之下显示 scrollY是window对象，适用于FF，chrome，opera支持，ie不支持， 忽视Doctype 定义规则，也即是DTD说明。 window.scrollY;　　//用法,在 ie 下显示 scrollTop 使用时要区分是否声明了DTD的情况 未声明 DTD ： document.body.scrollT　　//兼容所有浏览器，来获取滚动条的偏移量; 声明了 DTD ： document.documentElement.scrollT　　//chrome，safari值为0; 综合上边，所以通常取滚动条的偏移量的时候用的是var scroll_top=window.pageYOffset || document.documentElement.scrollTop 这样写的原因可能是因为pageYOffset兼容的范围比较大，基本上只要执行到此处就OK了，除非碰到ie8等浏览器才需要后边的支持。加快执行速度。（个人拙见） 关于DTD请百度，本人对DTD也就知道个皮毛，有这么个东西而已，要是有大牛的话，欢迎指点 patM　　//可以用来判断是否声明了DTD; 值为"BackCompat"：未声明DTD;
值为"CSS1Compat"：已声明 DTD;
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动jQuery CSS 操作 - scrollTop() 方法
jQuery CSS 操作 - scrollTop() 方法
设置 &div& 元素中滚动条的垂直偏移：
$(&.btn1&).click(function(){
$(&div&).scrollLeft(100);
定义和用法
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。
$(selector).scrollTop(offset)
可选。规定相对滚动条顶部的偏移，以像素计。
提示和注释
注释：该方法对于可见元素和不可见元素均有效。
注释：当用于获取值时，该方法只返回第一个匹配元素的 scroll top offset。
注释：当用于设置值时，该方法设置所有匹配元素的 scroll top offset。
亲自试一试 - 实例
使用 scrollTop() 方法获得 scroll top offset。其他回答(1)
http://blog.csdn.net/wgw/article/details/5580654
园豆：9726
&&&您需要以后才能回答，未注册用户请先。frontopen主题V1.5.04.15版本已发布 推荐更新！
frontopen “讨论区” 正式上线
鸣谢主题捐赠者：感叹帝,Calon YE，孙玉龙，魂客，创想，孜夕寒
顾余笑，小菜，晨风，菠菜，*忠杰，浪子，99开发赞助，IT江湖，小熊
如果发现更新最新版出现缩略图无法显示，请先装回v1.4.03.02版本
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
围观9704次
编辑日期： 字体：
javascript中制作滚动代码的常用属性
页可见区域宽： document.body.clientW
网页可见区域高： document.body.clientH
网页可见区域宽： document.body.offsetWidth
(包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollW
网页正文全文高： document.body.scrollH
网页被卷去的高： document.body.scrollT
网页被卷去的左： document.body.scrollL
网页正文部分上： window.screenT
网页正文部分左： window.screenL
屏幕分辨率的高： window.screen.
屏幕分辨率的宽： window.screen.
屏幕可用工作区高度： window.screen.availH
1、offsetLeft
假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。
我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。
&div id=”tool”&
&input type=”button” value=”提交”&
&input type=”button” value=”重置”&
“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。
“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离，因为距其左边最近的是 “tool” 层的左边框。
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离，因为距其左边最近的是“提交”按钮的右边框。
以上属性在 FireFox 中也有效。
另 外：我们这里所说的是指 HTML 控件的属性值，并不是 document.body，document.body 的值在不同浏览器中有不同解释（实际上大多数环境是由于对 document.body 解释不同造成的，并不是由于对 offset 解释不同造成的），点击这里查看不同点。
标题：offsetTop 与 style.top 的区别
预备知识：offsetTop、offsetLeft、offsetWidth、offsetHeight
我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：
一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
二、offsetTop 只读，而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。
标题：clientHeight、offsetHeight和scrollHeight
我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释，这里说的是 document.body，如果是 HTML 控件，则又有不同，点击这里查看。
这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。
2、clientHeight
clientHeight
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。
offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。
scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。
FF 在不同的 DOCTYPE 中对 clientHeight 的解释不同， xhtml 1 trasitional 中则不是如上解释的。其它浏览器则不存在此问题。
标题：scrollTop、scrollLeft、scrollWidth、scrollHeight
3、scrollLeft
scrollTop 是“卷”起来的高度值，示例：
&div style=”width:100height:100background-color:#FF0000;overflow:” id=”p”&
&div style=”width:50height:300background-color:#0000FF;” id=”t”&如果为 p 设置了 scrollTop，这些内容可能不会完全显示。&/div&
&script type=”text/javascript”&
var p = document.getElementById(“p”);
p.scrollTop = 10;
由于为外层元素 p 设置了 scrollTop，所以内层元素会向上卷。
scrollLeft 也是类似道理。
我们已经知道 offsetHeight 是自身元素的宽度。
而 scrollHeight 是内部元素的绝对宽度，包含内部元素的隐藏的部分。
上述中 p 的 scrollHeight 为 300，而 p 的 offsetHeight 为 100。
scrollWidth 也是类似道理。
IE 和 FireFox 全面支持，而 Netscape 和 Opera 不支持 scrollTop、scrollLeft（document.body 除外）。
发表时间： 20:20:16
标题：offsetTop、offsetLeft、offsetWidth、offsetHeight
4、clientLeft
返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离，可以理解为边框的长度
一直以来对offsetLeft，offsetTop，scrollLeft，scrollTop这几个方法很迷糊，花了一天的时间好好的学习了一下．得出了以下的结果：
1.offsetTop
当前对象到其上级层顶部的距离.
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.
2.offsetLeft :
当前对象到其上级层左边的距离.
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.
3.offsetWidth :
当前对象的宽度.
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值
4.offsetHeight :
与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值
5.offsetParent
当前对象的上级层对象.
注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题.
利用这个属性，可以得到当前对象在不同大小的页面中的绝对位置．
得到绝对位置脚本代码
1function GetPosition(obj)
3 var left = 0;
6 while(obj != document.body)
left = obj.offsetL
= obj.offsetT
obj = obj.offsetP
14 alert(“Left Is : ” + left + “rn” + “Top
Is : ” + top);
6.scrollLeft :
对象的最左边到对象在当前窗口显示的范围内的左边的距离．
即是在出现了横向滚动条的情况下，滚动条拉动的距离．
7.scrollTop
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．
即是在出现了纵向滚动条的情况下，滚动条拉动的距离．
我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释，这里说的是 document.body，如果是 HTML 控件，则又有不同，点击这里查看。
这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。
clientHeight
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。
offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。
scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。 同理 clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。
本文固定链接:
转载请注明:
作者：zhoumeng
这个作者貌似有点懒，什么都没有留下。
如果您觉得这篇文章有用处，请支持作者！鼓励作者写出更好更多的文章！
您可能还会对这些文章感兴趣！}