一句话理解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一致

时间: 2024-10-12 20:20:19

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

scrollTop clientTop offsetTop scrollHeight clientHeight clientWidth的区别及用法

这几个属性做滚动时会经常用到,现总如下: 首先定义一个div,样式如下: <style> *{ margin:0px; padding:0px;} body{ margin:0px; padding:10px; border:solid 10px #69F;} .aa{ margin:20px auto 0px; width:100px; height:50px; overflow:auto; border:solid 1px #cccccc; padding:0px 10px;} <

JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)

IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中:  document.body.clientWidth ==> BODY对象宽度 document.

document.documentElement和document.body 与document.compatMode的关系

首先我们看看document.compatMode(兼容模式): document.compatMode它有两种可能的返回值:BackCompat和CSS1Compat, document.compatMode的使用,感觉这个对于我们开发兼容性的web页面还是很有帮助,我们都知道,IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声

document.documentElement与body下clientHeight,scrollHeight等区别

本次说明仅在chrom环境下,ie等其他浏览器可能不同 1获取显示屏高度(pc和移动端) window.screen.height => 这个好理解,不多说. 2获取浏览器可视窗口高度(PC端) document.documentElement.clientHeight => 就是网页在浏览器中可见高度,不包括浏览器自身的状态栏,随着浏览器大小变化: 3获取网页内容高度 1)document.documentElement.scrollHeight = document.documentEle

document.documentElement.clientHeight 和 document.body.clientHeight

document.documentElement.clientHeight 和 document.body.clientHeight 介绍 在进行一些网页效果处理的时候,经常碰到document.documentElement.clientHeight和document.body.clientHeight. 百度随便一查,经常碰到有人将二者混为一谈. 但是二者之间还是有着很大区别的. document.documentElement.clientHeight 可以称为是获取的可视区域的高度,而d

IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight

IEdocument.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度document.documentElement.scrollTop  浏览器滚动部分高度,document.body.scrollTop 始终为0document.documentElement.clientHeight  浏览器可视部分高度,document.body.clientHeight  浏览器所有内容高度

[No000068]document.body.clientHeight 和 document.documentElement.clientHeight 的区别

document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 注意开头<!DOCTYPE ..>的声明,没有该声明时,document.documentElement.clientHe

window.screen.height和window.screen.availHeight和document.body.clientHeight和document.documentElement.clientHeight

说这几个属性前 我说一下我的设备 我的设备有两个,一个高度为1080的显示器,一个高度为800的电脑 第一种:window.screen.height 这个方法是获取用户电脑屏幕的高度,是不关浏览器或者顶部工具栏跟底部工具栏的高度的 当我在高度为1080的我的显示屏屏幕上打印 window.screen.height 1080 当我在我的电脑上打印 window.screen.height 800 是的 ,这个属性就是电脑的高度 第二个属性:window.screen.availHeight 这

JavaScript基础 IE 7,8可用 获取网页的宽度与高度 document.documentElement.clientHeight

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut