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的值自然也就相等了。
最新文章
- string.IsNullOrEmpty和string.IsNullOrWhiteSpace方法的区别
- 编译安装 Zend Opcache 缓存Opcache,加速 PHP
- 解决VS+opencv中Debug版本与Release版本lib切换的问题
- The Docker学习记录[Doing]
- linux shell 去掉文本处理中的双引号
- [原]SQLite的学习系列之获取数据库版本
- MyEclipse 修改代码不生效
- SHARED_POOL_RESERVED_SIZE参数的设置及作用 -ZHUANZAI
- MSP430F149学习之路——LED
- 双系统下,Windows如何正确删除Linux系统
- leptonica 学习笔记2——pixBackgroundNormSimple
- 异步执行Dos命令
- python中函数与函数之间的调用,总是晕菜,整理如下,有不对或者补充的请提出来~
- sublime 2
- Work 3(工作类) (2017.07.01)
- New FileReader上传图片
- zookeeper分布式部署方案
- 将JSON格式数据转换为javascript对象 JSON.parse()
- [COCI11-12 #4]删数游戏(贪心+数据结构)
- CF1140E Palindrome-less Arrays
热门文章
- python中的pyc和pyo文件和__pyc__文件夹
- Bootstrap-轮播图-No.4
- BZOJ 2527 [Poi2011]Meteors (整体二分+树状数组)
- Spring Boot 前期篇
- [Svelte 3] Use DOM events and event modifiers in Svelte 3
- hybird(h5)页面自动化测试
- centos6.5linux安装docker之升级内核
- BZOJ 2346: [Baltic 2011]Lamp Dijkstra
- in和exists的区别
- JS基础_垃圾回收(GC)