解析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 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
任意位置显示html菜单
Feb 01 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 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 绘制网站登录首页图片验证码
2016/04/12 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
二级域名转向类
2006/11/09 Javascript
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
Python对象转换为json的方法步骤
2019/04/25 Python
使用python turtle画高达
2020/01/19 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
Python基于locals返回作用域字典
2020/10/17 Python
Python 多进程原理及实现
2020/12/21 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
如何掌握自荐信格式呢
2013/11/19 职场文书
自荐信格式技巧有哪些呢
2013/11/19 职场文书
大学生活学习的自我评价
2013/12/03 职场文书
节能环保口号
2014/06/12 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python
一文弄懂MySQL索引创建原则
2022/02/28 MySQL