- 浏览: 149472 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (137)
- JavaScript (23)
- get post (0)
- SSH (4)
- Hibernate (1)
- cmd (2)
- 火狐 IE (1)
- 中英文环境模板下载 (1)
- 日期 (0)
- 其他总结 (5)
- 正则校验 (3)
- Sql Server (0)
- FreeMarker (1)
- 继承 (1)
- SQL (2)
- ORACLE -- SQL Server -- Access 常见Sql语句的区别 (1)
- ORACLE -- SQL Server -- Access 常见Sql语句的区别 (0)
- 解决int和Integer不能互转 (0)
- 原子类 (1)
- Final,finally,finalize的区别 (1)
- Web前端 (12)
- Reader InputStream (1)
- 线程 (1)
- JDBC (1)
- AJAX (3)
- Linux (2)
- 素数 (1)
- 接口-----继承 (1)
- 数据库查询性能优化 (1)
- Spring MVC3 深入了解 (1)
- JS (18)
- log4j简介 (1)
- Java序列化的机制和原理 (0)
- allowTransparency属性 (1)
- 测试类 (1)
- CSS (14)
- JQuery (10)
- 多线程 (1)
- 数据库 (2)
- Spring 注解 (1)
- JSTL标签库 (1)
- HTML (8)
- 界面设计 (4)
- 测试 (4)
- 职业生涯 (1)
- 数据可视化 (1)
- UI设计 (3)
- eclipse怎样生成javadoc (2)
- redis memcache 比较 (1)
- Windows 8系统IE10无法安装Flash Player插件的解决办法 (1)
- IE7 问题 (1)
- 常用JS验证 (1)
- Hadoop,MapReduce学习步骤 (1)
- 开始-运行-命令大全 (1)
- jQuery与ExtJS优缺点比较 (1)
- Oracle (1)
- 文档转换 (1)
- Maven与Ant比较 (1)
最新评论
-
谁说我不是会员:
很给力的文章,通俗易懂
Get请求和Post请求的区别 -
Spirit_eye:
请问一个图片按钮怎么置灰
按钮置灰跟按钮不显示
offsetHeight, clientHeight与scrollHeight的区别
- 博客分类:
- JavaScript
offsetHeight, clientHeight与scrollHeight的区别
在网上搜了一下,结论非常笼统,讲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 的解释与上面相同,只是把高度换成宽度即可。
在网上搜了一下,结论非常笼统,讲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 的解释与上面相同,只是把高度换成宽度即可。
发表评论
-
web前端页面性能优化小结
2014-04-25 10:21 585web前端页面性能优化小 ... -
jQuery与ExtJS优缺点比较
2014-03-18 11:36 1996jQuery与ExtJS优缺点比较 jQuery 主页:h ... -
LABjs、RequireJS、SeaJS 哪个最好用?为什么?
2014-03-14 11:15 556LABjs、RequireJS、SeaJS 哪 ... -
表单提交后不刷新当前页面
2014-01-17 15:28 1214<form name='form1' id='for ... -
input失去焦点和获得焦点jquery焦点事件
2014-01-17 14:47 958input失去焦点和获得焦点jquery焦点事件 input ... -
html5 在IE6/IE7/IE8中使用html5标签
2014-01-13 11:26 4953html5 在IE6/IE7/IE8中使用html5标签 h ... -
李炎恢--JS视频
2013-05-21 15:40 758李炎恢--JS视频 http://wenku.baidu.co ... -
SeaJS-----GitHub Issues
2013-05-20 16:17 724SeaJS 是直接通过 GitHub Issues 来管理, ... -
CMD 模块定义规范
2013-05-15 10:45 304CMD 模块定义规范 https://github.co ... -
Javascript模块化编程(三):require.js的用法
2013-05-15 10:44 491Javascript模块化编程(三):require.js的 ... -
Sea.js 手册与文档
2013-05-15 09:30 558Sea.js 手册与文档 http://www.zhang ... -
sea.js 小记
2013-05-14 11:38 751sea.js 小记 看目录结构,代码不算多,命名划分很清晰, ... -
jQuery 实现多级下拉菜单导航
2013-03-13 11:39 4854JavaScript 实例教程 – jQuery 实现多级下拉 ... -
JS睡眠function
2013-03-05 11:37 1782JS睡眠function function sle ... -
iframe高度动态自适应
2013-03-04 14:37 571iframe高度动态自适应 http://www.cnbl ... -
JS如何创建对象及实现继承
2013-03-04 14:36 582JS如何创建对象及实现继承 【原型】 1. 什么 ... -
js继承的几种实现方法
2013-03-04 13:40 641js继承的几种实现方法 [size=x-small]&l ... -
打印页面指定区域的js源码
2012-12-05 14:44 647<script type="text/ ... -
一道基础例题的思考
2012-12-05 14:30 638引用 <script type="text/j ... -
pager-taglib -- 分页标签用法
2012-08-09 10:10 759pager-taglib -- 分页标签用法 Usin ...
相关推荐
clientHeight offsetHeight scrollHeight clientWidth详解
在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论。以下结论皆是在标准模式下测试通过的,没有测试quirk模式。 clientHeight ...offsetHeight在IE6,IE7,IE8以及最新的的FF, Chr
clientHeight,offsetHeight,scrollHeight,offsetParent和parentElement,offsetLeft.
NULL 博文链接:https://love2java.iteye.com/blog/403776
大厂前端面试题目|# 前端基础知识 ...本章将通过多个面试题,讲解前端常考的基础知识面试题,同时复习一些重要的知识点。 ## 为何要考察 扎实的前端基础知识,是作为前端工程师的根本。基础知识能保证最基本的使用,...
四种浏览器对_clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth_和_scrollWidth_的解
尺寸相关:offsetHeight、clientHeight、scrollHeight; 偏移相关:offsetTop、clientTop、scrollTop、pageYOffset、scrollY; 获取相对视口位置:Element.getBoundingClientRect(); 获取元素的style对象:...
clientHeight,只读 clientHeight可以用公式 CSS height + CSS padding – 水平滚动条的高度 (如果存在) 来计算。 如图,这样一个div,它的clientHeight为95,计算:50(height)+30(padding-top)+30(padding-bottom)...
top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight 等应用,大家可以参考下。
每次看到js中的 clientHeight(clientTop), offsetHeight(offsetTop),scrollHeight(scrollTop)就头大,根本分不清这几种的区别,然而碰到这些已经不 值一两次了,然后每次都要查看一下各自的区别,才能决定使用哪个...
scrollHeight,clientHeight,offsetHeight的区别 说明: scrollHeight:DOM元素的实际内容的高度,不包border的高度,会随DOM元素中内容的增加(超过可视区后)而变大。 clientHeight:DOM元素内容可视区的高度,不包含...
scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解 2009年12月14日,16:58:19 | ArthurXF ...(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
在ie6中很多js脚本执行就会出现问题,一般是在获取clientWidth, clientHeight,offsetWidth, offsetHeight,scrollWidth, scrollHeight,scrollTop, scrollLeft会返回不正确的值。 因为在加了doctype后,在ie6中...
1.四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。clientHeight大家对 ...
网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth (包括边线和滚动条的宽); 网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document...
关于clientHeight、offsetHeight、scrollHeight window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间) window.screen.width 返回当前屏幕宽度(分辨率值) ...
在js中,存在着N多的关于高度和宽度的属性,比如:clientHeight、offsetHeight、scrollHeight、availHeight、scrollLeft、scrollTop、style.height、innerHeight、outerHeight、scree.height等等……这么多,傻傻分...
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和...offsetHeight clientHeight scrollHeight offsetLeft clientLeft scrollLeft offsetTop clientT
document.body.clientHeight – 网页可见区域高 document.body.offsetWidth – 网页可见区域宽,包括边线和滚动条的宽 document.body.offsetHeight – 网页可见区域高,包括边线和滚动条的高[FF,chrom下是整个页面高...