一句话理解innerHeight，(document.documentElement，document.body) / clientHeight，offsetHeight的区别和用法
Posted 点点乐淘淘
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一句话理解innerHeight，(document.documentElement，document.body) / clientHeight，offsetHeight的区别和用法相关的知识，希望对你有一定的参考价值。
要理解这几个属性，首先要搞明白body，documentElement的区别
1、body是DOM对象里的body子节点，即<body>标签
2、documentElement是整个节点树的跟节点，即<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、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
chrome、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。
IE知道11版本才修改成和chorme，ff一致
以上是关于一句话理解innerHeight，(document.documentElement，document.body) / clientHeight，offsetHeight的区别和用法的主要内容，如果未能解决你的问题，请参考以下文章
不正确的 window.innerWidth 和 window.innerHeight
jQuery height()innerHeight()outerHeight()函数的区别详解