解析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 相关文章推荐
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
Feb 11 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
JS出现404错误原理及解决方案
Jul 01 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 Squid中可缓存的动态网页设计
2008/09/17 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
form中限制文本字节数js代码
2007/06/10 Javascript
javascript &&和||运算法的另类使用技巧
2009/11/28 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
2018/04/21 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
python抓取网页中的图片示例
2014/02/28 Python
用Python编写web API的教程
2015/04/30 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
python读取Excel实例详解
2018/08/17 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
大门门卫岗位职责
2013/11/30 职场文书
大学生职业生涯规划方案
2014/01/03 职场文书
全国道德模范事迹
2014/02/01 职场文书
股票投资建议书
2014/05/19 职场文书
农业项目建议书
2014/08/25 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
廉洁自律个人总结
2015/02/14 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
2019安全宣传标语大全
2019/08/14 职场文书