要理解这几个属性，首先要搞明白body，documentElement的区别

1、body是DOM对象里的body子节点，即<body>标签
2、documentElement是整个节点树的跟节点，即<html>标签

========================body，html的区别==================================

很多人都认为body和html是一样的，判断依据就是给body加背景颜色后，整个网页文档都会跟着变色。其实这种现象并不能说明body和html节点就是同一个东西，之所以会这样是由继承导致的。

我们都知道继承是指子元素继承父元素的某些特性，body作为html的子节点，理论上是不存在html继承body属性的，但就偏偏存在这样一个例外，html继承了body的background属性，这就导致了给body添加背景颜色整个html跟着变色。（各位同学可以试试给body加个高度，设置背景颜色，然后给html设置另外一个背景颜色，看看效果）

因此新建的网页在没内容的情况下，body的高度等于0，随着内容的增加，body的高度随之增加

========================结束=======================================

理解了body和html的区别就好理解innerHeight，clientHeight，offsetHeight，各浏览器之所以返回的值不同，根本原因就在于计算的基准不同：

1、document.body以body元素为计算基准

2、document.documentElement以html为基准

======================================================

以上都是在标准模式下，在怪异模式下情况又有点不同了：

IE在怪异模型（quick mode）下document.documentElement无法正确取到clietHeight，scrollHeight等值，比如clietHeight=0。可见IE的怪异模型并没有把html作为盒子模型的一部分，好在现在很少使用怪异模型。（注：如果页面没写DTD或写的不对，IE6默认使用怪异模型解析页面）

document.body.scrollHeight和document.documentElement.scrollHeight的区别：
document.body.scrollHeight是body元素的滚动高度，document.documentElement.scrollHeight为页面的滚动高度（正常情况下应该使用这个），且 document.documentElement.scrollHeight在IE和Firefox下还有点小差异。
IE : document.documentElement.scrollHeight = document.body.scrollHeight + marginTop bottom高度 + 上下border宽度
firefox : document.documentElement.scrollHeight = document.body.scrollHeight + marginTop bottom高度

IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
chrome、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。
IE知道11版本才修改成和chorme，ff一致

alert(document.compatMode+"\nwindow.innerHeight："+window.innerHeight+"\n"+"document.documentElement.clientHeight："+document.documentElement.clientHeight+"\n"+"document.documentElement.offsetHeight："+document.documentElement.offsetHeight+"\ndocument.body.offsetHeight："+document.body.offsetHeight+"\ndocument.body.clientHeight："+document.body.clientHeight);

　　

innerHeight，clientHeight，offsetHeight，scrollWidth等的区别和用法的更多相关文章

  1. offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

    offsetWidth/offsetHeight返回值包含content + padding + border,效果与e.getBoundingClientRect()相同 clientWidth/c ...

  2. clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系

    style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoff ...

  3. clientHeight & offsetHeight & scrollHeight

    clientHeight & offsetHeight & scrollHeight scrollWidth/scrollHeight,offsetWidth/offsetHeight ...

  4. 一起看看 scrollHeight,clientHeight,offsetHeight,scrollTop是个啥

    scrollHeight最终数值的组成: var scrollHeight = currentElementContent.height +currentElement.paddingTop+curr ...

  5. Position属性四个值：static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  6. Python中内置数据类型list,tuple,dict,set的区别和用法

    Python中内置数据类型list,tuple,dict,set的区别和用法 Python语言简洁明了,可以用较少的代码实现同样的功能.这其中Python的四个内置数据类型功不可没,他们即是list, ...

  7. angularjs中provider，factory，service的区别和用法

    angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...

  8. [转]div与span区别及用法

    DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候, ...

  9. GROUP BY,WHERE,HAVING之间的区别和用法

      GROUP BY,WHERE,HAVING之间的区别和用法 分类: Oracle学习2009-11-01 23:40 21963人阅读 评论(6) 收藏 举报 mathmanagersql数据库m ...

随机推荐

  1. FineReport层式报表解决大数据集展示问题攻略

    本文以填报报表为例,通过分页的方式,来解决大数据集展示的问题. 实现的思想就是通过在SQL里筛选部分数据库数据,以达到浏览器可以合理的展示报表页面.(数据分段,语句我这采用的是MYSQL,如果要用其他 ...

  2. 151003-动起来-Javascript

    Hi 玩了三天了,下午一会儿还有电影,心快收不回来了...不过,竟然无聊到想学习,你敢信? 下个规矩吧,以后每天早上起来在这里写东西,至少也得是个hi,或者以后都以这个为开头好了,算是个个人标志?申请 ...

  3. Openxml入门---Openxm读取Excel数据

    Openxml读取Excel数据: 有些问题,如果当Cell 里面是 日期和浮点型的话,对应的Cell.DataType==Null,对应的时间会转换为一个浮点型,对于这块可以通过DateTime.F ...

  4. json与jsonp小结

    json 1. json 的值可以是下面这些类型: ① 数字(整数或浮点数),比如123,1.23 ② 字符串(在双引号中) ③ 逻辑值(true 或 false) ④ 数组(在方括号中) ⑤ 对象( ...

  5. java编程思想读书笔记三（11-21）

    十一:持有对象 >持有对象实例 ●数组将数字与对象联系起来.它保存类型明确的对象,查询对象时,不需要对结果做类型转换.他可以是多维的. 可以保存基本的数据类型.但是,数组一旦生成,容量就不会在变 ...

  6. 1.使用using释放资源

    using语句有二个关键字 >>作为关键字,using可以导入命名空间 >>作为C#语句,using可以释放对象占用的内存资源 语法: using(SqlConnection ...

  7. 怎样关闭WIN7系统的自动更新

    百度经验 > 游戏/数码 > 电脑 > 电脑软件 怎样关闭WIN7系统的自动更新 听语音 | 浏览:108460 | 更新:2012-07-24 18:03 | 标签:win7 1 ...

  8. C#手工注入辅助工具

    看了某牛出版的MySql手注天书一神书,基本上解决了SQL注入上的知识点,于是打完(酱油)省赛回来通宵了一晚上写了个工具 方便语句构造SQL 联合查询 报错注入 盲注 读写 命令执行 基本都有整合 遇 ...

  9. npm换源

    作者一介布衣:http://yijiebuyi.com/blog/b12eac891cdc5f0dff127ae18dc386d4.html npm 是node.js 环境下的包管理器,非常强大智能. ...

  10. dotnetGen 系列终于开源了

    https://github.com/2881099/dotnetGen .Net 3.0 + SqlServer 生成器 https://github.com/2881099/dotnetGen_s ...