码迷,mamicode.com
首页 > 其他好文 > 详细

一句话理解innerHeight,(document.documentElement,document.body) / clientHeight,offsetHeight的区别和用法

时间:2016-03-12 10:15:43      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:

要理解这几个属性,首先要搞明白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的区别和用法

标签:

原文地址:http://www.cnblogs.com/diantao/p/5267898.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!