解析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 必填项判断表单是否为空的方法
Sep 14 Javascript
详细讲解JS节点知识
Jan 31 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
js 颜色选择插件
Jan 23 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
vue制作toast组件npm包示例代码
Oct 29 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
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从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
ajax 文件上传应用简单实现
2009/03/03 Javascript
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
详解python中的hashlib模块的使用
2019/04/22 Python
Python实现微信小程序支付功能
2019/07/25 Python
解析python的局部变量和全局变量
2019/08/15 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
美术社团活动总结
2014/06/27 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
公司表扬稿范文
2015/05/05 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
Python如何用re模块实现简易tokenizer
2022/05/02 Python