解析offsetHeight,clientHeight,scrollHeight之间的区别


Posted in Javascript onNovember 20, 2013

在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论。以下结论皆是在标准模式下测试通过的,没有测试quirk模式。

clientHeight

大部分浏览器对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,即然是指可看到内容的区域,滚动条不算在内。但要注意padding是算在内。其计算方式为clientHeight = topPadding + bottomPadding+ height - scrollbar.height。

offsetHeight
在IE6,IE7,IE8以及最新的的FF, Chrome中,在元素上都是offsetHeight = clientHeight + 滚动条 + 边框。

scrollHeight
scrollHeight是元素的padding加元素内容的高度。这个高度与滚动条无关,是内容的实际高度。

计算方式 :scrollHeight = topPadding + bottomPadding + 内容margix box的高度。

在浏览器中的区别在于:

IE6、IE7 认为scrollHeight 是网页内容实际高度,可以小于clientHeight。

FF、Chrome 认为scrollHeight 是网页内容高度,不过最小值是clientHeight。

注: 以上都是对于一般元素而方言的,body和documentElement的clientHeight, offsetHeight和scrollHeight在各个浏览器中的计算方式又不同。在所有的浏览器中,如果你想获取整个视窗的高度,你得用documentElement.clientHeight,因为body.clientHeight是由它的内容决定的。 关于body和documentElement的这些属性,则完全是另外一回事:

FF19

在body上设置overflow:scroll就是设置浏览器的滚动条,导致body.clientHeight永远都等于body.scrollHeight。

body
clientHeight:body.padding+ body.height(css设置或内容撑的);

offsetHeight:clientHeight+ body.border;

scrollHeight== clientHeight。

documentElement
clientHeight= window视窗高度 -scrollbar.width。

offsetHeight= body.offsetHeight  + body.margin。

scrollHeight= 内容的高度(与body的height样式无关),但最小值是documentElement.clientHeight。

元素上
offsetHeight= padding + border + height。

clientHeight= padding + height - scrollbar.width。

scrollHeight>= clientHeight

从结果分析,FF认为scrollHeight的最小高度是clientHeight。

offsetLeft = 元素border左上角到window视窗原点的距离 或 到offsetParent的borderbox顶部的距离。

Chrome
body
clientHeight= body.padding + body.height(css设置或内容撑大);

offsetHeight = body.clientHeight + body.border;

scrollHeight= body.padding + 内容的高度(与height样式无关),但最小值是documentElement.clientHeight。

documentElement
clientHeight= window视窗高度 ? 滚动条高度。

offsetHeight  = body.offsetHeight + body.margin;

scrollHeight  = 内容的高度(与body上的height无关),但最小值是documentElement.offsetHeight。

元素上
offsetHeight = padding + border + height。

clientHeight = padding + height - scrollbar.width。

scrollHeight >= clientHeight

Safari 5
body
clientHeight= body.padding + body.height(CSS或内容撑的);

offsetHeight= clientHeight + border;

scrollHeight= body.padding + 内容的高度(与height样式无关),但最小值是documentElement.clientHeight。

documentElement
clientHeight = window窗口大小 ? 滚动条大小

offsetHeight = body.offsetHeight + body.margin

scrollHeight= 内容的高度(与body上的height无关),但最小值是documentElement.offsetHeight。

IE8
在IE8下,滚动条的大小是17个像素。

body
clientHeight= body.padding + body.height(css设置或内容撑大)

offsetHeight = clientHeight + body.border

scrollHeight =内容的高度(与body上的height无关),但最小值是clientHeight。

documentElement
clientHeight = 窗口大小(除去滚动条后)

offsetHeight = clientHeight + 滚动条大小 + body.border

scrollHeight=内容的高度(与body上的height无关),但最小值是body.offsetHeight+ margin。

元素上
offsetHeight = padding + border + height。

clientHeight = padding + height - scrollbar.width。

scrollHeight >= clientHeight

从结果分析,FF认为scrollHeight的最小高度是clientHeight。

offsetLeft = 元素border左上角到画布原点的距离 或 到offsetParent的borderbox顶部的距离。

IE7
在IE7中,body上设置的滚动条并不是窗口的滚动条,这个需要注意。

body
clientHeight= body.padding + height(css设置或内容撑大)? body上的滚动条。

offsetHeight= clientHeight + 滚动条的大小+body.border。

scrollHeight=   内容的高度(与body上的height无关)。

documentElement
clientHeight = window视窗大小(与滚动条的有无无关)

offsetHeight = clientHeight。

scrollHeight = body.offsetHeight + border.margin

元素
offsetHeight = padding + border + height。

clientHeight = padding + height - scrollbar.width。

scrollHeight = padding + 内容marginbox的高度

从结果分析,IE7认为scrollHeight可以小于clientHeight。

offsetLeft = 元素border box左上角到父容器(不是offsetParent)的borderbox左上角的距离。

IE6
在IE6中,与IE7类似, body上设置的滚动条并不是窗口的滚动条。

body
clientHeight = body.padding + body.height

offsetHeight = body.clientHeight + body.border + body上滚动条大小。

scrollHeight =内容的高度(与body上的height无关)。

documentElement
在IE6中,与IE7类似,虽然body上设置的滚动条并不是窗口的滚动条,但它的clientHeight和offsetHeight还算与其它浏览器想统一。

clientHeight = 窗口大小(除去窗口滚动条大小后)

offsetHeight =clientHeight + body.border

scrollHeight = body.offsetHeight + body.margin

元素
offsetHeight = padding + border + height。

clientHeight = padding + height - scrollbar.width。

scrollHeight = padding + 内容margin box的高度

从结果分析,IE6认为scrollHeight可以小于clientHeight。

同理

clientWidth、offsetWidth 和scrollWidth 的解释与上面相同,只是把高度换成宽度即可。

Javascript 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
JavaScript Konami Code 实现代码
Jul 29 Javascript
js生成随机数的方法实例
Oct 16 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
深入理解Vue 组件之间传值
Aug 16 Javascript
JavaScript实现图片上传并预览并提交ajax
Sep 30 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 #Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 #Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 #Javascript
JavaScript中setInterval的用法总结
Nov 20 #Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 #Javascript
jquery iframe操作详细解析
Nov 20 #Javascript
JS获取当前日期和时间的简单实例
Nov 19 #Javascript
You might like
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
php文件下载处理方法分析
2015/04/22 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python基于Selenium的web自动化框架
2019/07/14 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
全球性的女装店:storets
2019/06/12 全球购物
会计专业毕业生求职信分享
2014/01/03 职场文书
幼儿园教学管理制度
2014/02/04 职场文书
师德建设实施方案
2014/03/21 职场文书
学习雷锋标语
2014/06/25 职场文书
校园元旦活动总结
2014/07/09 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
使用Pytorch训练two-head网络的操作
2021/05/28 Python