document.documentElement.clientHeight 和 document.body.clientHeight

介绍

在进行一些网页效果处理的时候，经常碰到document.documentElement.clientHeight和document.body.clientHeight。

百度随便一查，经常碰到有人将二者混为一谈。

但是二者之间还是有着很大区别的。

document.documentElement.clientHeight 可以称为是获取的可视区域的高度，而document.body.clientHeight则获取的是网页body的高度。

整个document.documentElement.clientHeight的高度与window.innerHeight的高度差了一个横向的滚动条，如果网页当中不包括横向滚动条的话，二者是相同的。

例如：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<body>

	<div style="height: 1000px;"></div>

	<button id="btn">点击</button>

</body>

<script type="text/javascript">

	var btn = document.getElementById('btn');

	btn.onclick = function() {

		console.log('innerHeight:' + window.innerHeight)

		console.log('clientHeight:' + document.documentElement.clientHeight)

		console.log('documentbody:' + document.body.clientHeight)

	}

</script>

</html>

输出的结果为:

innerHeight: 732

clientHeight: 732

document.body: 1024

通过谷歌浏览器的控制台可以发现，document.body.clientHeight的高度是等同于body的高度的。

下面是在JavaScript标准参考教程的说明：

html,body{height:100%}

经常碰到很多人将代码写成下面这个样子:

var a = document.documentElement.clientHeight || document.body.clientHeight

二者的值本是不等，那么如何能采用这种写法呢？

或者换句话说，想要采用上面这种兼容性的写法，就需要让二者的值相等，那么如果做到呢？

如果在css当中，设置了下面的属性:

html,body {

    height:100%;

}

那么document.documentElement.clientHeight和document.body.clientHeight的高度就会变得相同。

为什么呢?

document.documentElement.clientHeight中的documentElement表示的是根节点html,整个代码的意思是获取根节点html当中可视区域的高度。

而document.body.clientHeight中的body表示的是网页内容，获取的是整个网页内容的高度。

而上面的css代码则是将二者的高度设置为相等。经过这样的设置之后，document.documentElement.clientHeight和document.body.clientHeight的值自然也就相等了。

document.documentElement.clientHeight 和 document.body.clientHeight的更多相关文章

  1. 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】

    前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...

  2. document.body.clientHeight与document.documentElement.clientHeight

    当你的网页有: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  3. IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部

    DTD已声明 IE document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度 docu ...

  4. 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...

  5. document.documentElement.clientWidth

    document.documentElement.clientWidth 摘自:http://blog.sina.com.cn/s/blog_6f1f9ead0100n1f6.html 关于获取各种浏 ...

  6. js中document.documentElement 和document.body 以及其属性 clientWidth等

    在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准 ...

  7. document.body、document.documentElement和window获取视窗大小的区别

    来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...

  8. document.documentElement和document.body区别

    body是DOM对象里的body子节点,即body标签, documentElement 是整个节点树的根节点root, 详细介绍请看本文,感兴趣的朋友可以参考下   区别: body是DOM对象里的 ...

  9. document.documentElement 和document.body 以及其属性

    js中document.documentElement 和document.body 以及其属性 (原来HTML里是document.body  --XHTML里是document.documentE ...

  10. document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    转自http://wo13145219.iteye.com/blog/2001598 一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取do ...

随机推荐

  1. BZOJ3887 [Usaco2015 Jan]Grass Cownoisseur[缩点]

    首先看得出缩点的套路.跑出DAG之后,考虑怎么用逆行条件.首先可以不用,这样只能待原地不动.用的话,考虑在DAG上向后走,必须得逆行到1号点缩点后所在点的前面,才能再走回去. 于是统计从1号点缩点所在 ...

  2. 在laravel5.8中集成swoole组件----初步测试

    铺垫 前提是先安装swoole组件,我采用从pecl-----php扩展组件网下载swoole扩展包,然后切入到解压缩的扩展包中运行phpize命令, phpize是一种编译命令,可以在安装文件中生成 ...

  3. Filtering Approaches for Real-Time Anti-Aliasing（2011 SIGGRAPH）

    Filtering Approaches for Real-Time Anti-Aliasing(2011 SIGGRAPH) 在2011的SIGGRAPH上,NVIDA提出了FXAA3.1,本文主要 ...

  4. springboot整合easyexcel实现Excel导入导出

    easyexcel:快速.简单避免OOM的java处理Excel工具 Java解析.生成Excel比较有名的框架有Apache poi.jxl.但他们都存在一个严重的问题就是非常的耗内存,poi有一套 ...

  5. 题解 【NOIP2003】神经网络

    [NOIP2003]神经网络 Description 问题背景: 人工神经网络( Artificial Neural Network )是一种新兴的具有自我学习能力的计算系统,在模式识别.函数逼近及贷 ...

  6. 通信网络（CCF）【图的遍历】

    问题描述 某国的军队由N个部门组成,为了提高安全性,部门之间建立了M条通路,每条通路只能单向传递信息,即一条从部门a到部门b的通路只能由a向b传递信息.信息可以通过中转的方式进行传递,即如果a能将信息 ...

  7. Linux shell -"a-d"命令

    shell中条件判断if中的-z到-d的意思 分类:shellLinux (2006)  (0) shell中条件判断if中的-z到-d的意思  [ -a FILE ] 如果 FILE 存在则为真.  ...

  8. 1-1RGB色彩模式

    http://www.missyuan.com/thread-350716-1-1.html RGB色彩模式 CTRL+O  打开文件 双击{O->Open} F8/菜单-窗口-信息    调出 ...

  9. MySQL树

    树 树状图是一种数据结构,它是由n(n>=1)个有限结点组成一个具有层次关系的集合.把它叫做“树”是因为它看起来像一棵倒挂的树,也就是说它是根朝上,而叶朝下的. 它具有以下的特点:每个结点有零个 ...

  10. ZR#710

    雷劈数 题意: 现在给出两个整数,求出位于两个整数之间的所有的"雷劈数. 解法: 因为雷劈数特殊的性质,所以在数据范围中的雷劈数实际很少,直接暴力打表就行. CODE: #include&l ...