document.documentElement.clientHeight 和 document.body.clientHeight
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的更多相关文章
- 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】
前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...
- document.body.clientHeight与document.documentElement.clientHeight
当你的网页有: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部
DTD已声明 IE document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度 docu ...
- 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...
- document.documentElement.clientWidth
document.documentElement.clientWidth 摘自:http://blog.sina.com.cn/s/blog_6f1f9ead0100n1f6.html 关于获取各种浏 ...
- js中document.documentElement 和document.body 以及其属性 clientWidth等
在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准 ...
- document.body、document.documentElement和window获取视窗大小的区别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...
- document.documentElement和document.body区别
body是DOM对象里的body子节点,即body标签, documentElement 是整个节点树的根节点root, 详细介绍请看本文,感兴趣的朋友可以参考下 区别: body是DOM对象里的 ...
- document.documentElement 和document.body 以及其属性
js中document.documentElement 和document.body 以及其属性 (原来HTML里是document.body --XHTML里是document.documentE ...
- document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
转自http://wo13145219.iteye.com/blog/2001598 一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取do ...
随机推荐
- centos 7 + Net Core 3.0 + Docker 配置说明（不含https）
1.新建Core3.0项目 1.1 使用visual studio 2019 创建一个名为core3.web.httpapi 的"ASP.NET Core Web应用程序" 1.2 ...
- shell 跟$有关的各种怪命令集锦
$ 这个程式的执行名字 $n 这个程式的第n个参数值,n=.. $* 这个程式的所有参数,此选项参数可超过9个. $# 这个程式的参数个数 $$ 这个程式的PID(脚本运行的当前进程ID号) $! 执 ...
- redis geo操作
package club.newtech.qbike.trip.domain.service; import club.newtech.qbike.trip.domain.core.Status;im ...
- 洛谷P1156 垃圾陷阱【线性dp】
题目:https://www.luogu.org/problemnew/show/P1156 题意: 每一个垃圾投放时间是t,可以堆的高度是h,如果吃掉可以增加的生命值是f. 给定g个垃圾,初始生命值 ...
- [2019牛客多校第二场][E. MAZE]
题目链接:https://ac.nowcoder.com/acm/contest/882/E 题目大意:有一个\(n\times m\)的01矩阵,一开始可以从第一行的一个点出发,每次可以向左.向右. ...
- .net System.Net.Mail 之用SmtpClient发送邮件Demo
private static bool sendMail() { try { //接收人邮箱 string SendTo = "XXXXX@163.com ...
- CPU结构及段地址偏移地址的概念
原文地址:http://blog.csdn.net/yihuiworld/article/details/7533335#comments 程序如何执行: CPU先找到程序在内存中的入口地址 -- 地 ...
- 科大讯飞语音转文字，ffmpeg将wav转成pcm二进制音频文件
百度和讯飞和其他厂都提供了语音识别的接口,这里使用讯飞的识别将本地手机录的音频文件转成文字 以下注意事项: 1.X_Param 参数开始的时候带了空格导致验证不过,原因是讯飞将字符串做了repelce ...
- Python数据抓取（1） —数据处理前的准备
(一)数据抓取概要 为什么要学会抓取网络数据? 对公司或对自己有价值的数据,80%都不在本地的数据库,它们都散落在广大的网络数据,这些数据通常都伴随着网页的形式呈现,这样的数据我们称为非结构化数据 如 ...
- jQuery属性操作之html属性操作
jQuery的属性操作, 是对html文档中的属性进行读取.设置和移除操作.比如,attr(). removeAttr(). 1. attr() attr()可以设置属性值或者返回被选元素的属性值 1 ...