window.innerHeight和document.documentElement.clientHeight区别
今天有人问我这个问题，做了个小例子来记录一下子。
首先这两个都是获取可视区域的高度，那他们有什么区别呢
1.window.innerHeight属于BOM（浏览器对象模型），而document.documentElement.clientHeight则属于文档对象模型
2.window.innerHeight获取的高度包含横向滚动条，而document.documentElement.clientHeight不包含横向滚动条
做了一个小示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,body{
margin:;
padding:;
height: 100%;
width: 100%;
}
.box{
height: 100%;
width: 100%;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
console.log('innerHeight:'+ window.innerHeight)
console.log('clientHeight:'+ document.documentElement.clientHeight)
</script> </body>
</html>
此时运行打印结果：
innerHeight:760
clientHeight:760
可以看到没有横向滚动条时两者是相等的
现在我们将上面代码中box的宽度改为120%，使之出现横向滚动条
再看看结果
innerHeight:760
clientHeight:743
可以看到document.documentElement.clientHeight的高度少了一些，原因就是document.documentElement.clientHeight不包括横向滚动条
window.innerHeight和document.documentElement.clientHeight区别的更多相关文章
- window.innerHeight与document.documentElement.clientHeight与document.body.clientHeight区别
window.innerHeight属于BOM(浏览器对象模型),获取的高度包含横向滚动条 document.documentElement.clientHeight属于文档对象模型,不包含横向滚动条 ...
- window.screen.height和window.screen.availHeight和document.body.clientHeight和document.documentElement.clientHeight
说这几个属性前 我说一下我的设备 我的设备有两个,一个高度为1080的显示器,一个高度为800的电脑 第一种:window.screen.height 这个方法是获取用户电脑屏幕的高度,是不关浏览器或 ...
- document.documentElement.clientHeight 和 $(window).height() 无法正确获取页面可视区高度
背景: 弹出层插件(自适应) 实现过程中突然发现在获取可视区高度时,无论document.documentElement.clientHeight 还是 $(window).height()都无法正确 ...
- document.body.clientHeight和 document.documentElement.clientHeight 的区别
1.javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别 在往同事负责的页面添加我的功 ...
- document.documentElement.clientHeight和document.body.clientHeight区别
首先了解下document HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档节点. 所有的HTML元素都是元 ...
- [No000068]document.body.clientHeight 和 document.documentElement.clientHeight 的区别
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...
- document.body.clientHeight 和 document.documentElement.clientHeight的区别
document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.document ...
- document.documentElement.clientHeight 和 document.body.clientHeight
document.documentElement.clientHeight 和 document.body.clientHeight 介绍 在进行一些网页效果处理的时候,经常碰到document.do ...
- document.documentElement.clientHeight||document.documentElement.scrollHeight
在我看<JavaScript高级程序设计>(第三版)的时候,在clientHeight和scrollHeight那部分把我弄糊涂了. 原书是这样写的:( //宽度同理,就不仔细描述了.) ...
随机推荐
- static介绍、内部类、final、权限修饰符的作用范围
static 关键字:(可用于修饰方法.变量) static 特点: static是静态修饰符,一般修饰成员变量.被static修饰的属于全局共享.被static修饰的成员属于 ...
- 面试连环炮系列（二十一）：你们的项目怎么使用kafka
你们的项目怎么使用kafka? 我们采用kafka进行日志采集,准确点说是ELK方案,即elasticsearch + logstash + kibana + kafka.通过Spring AOP的方 ...
- 关于爬取babycenter.com A-Z为顺序的所有英文名及其详细属性
这一次爬取的内容已经在标题里提到了,下面是详细要求及其图示: 1.首先以A-Z的顺序获取所有英文名,最后爬取该英文名的详细信息. 2.CSV的header以3中的单词为准,请别拼错.如果没有对应的数 ...
- Springboot Activiti6 工作流 集成代码生成器 shiro 权限 vue.js html 跨域 前后分离
官网:www.fhadmin.org 特别注意: Springboot 工作流 前后分离 + 跨域 版本 (权限控制到菜单和按钮) 后台框架:springboot2.1.2+ activiti6.0 ...
- mysql与python的交互
mysql是一种关系型数据库,是为了表示事物与事物之间的关系,本身存于数据库中的内容意义并不大,所以广泛应用于编程语言中,python中九含有与MySQL交互的模块 pymysql 编程对mysql的 ...
- C++做四则运算的MFC计算器（一）MFC界面创建
学习最有效的方法就是实战,这两篇文章写了做MFC加减乘除计算器的过程. 第一写前台MFC界面搭建,第二写后台计算原理及代码. MFC编程参考教程:http://www.jizhuomi.com/sch ...
- RabbitMQ 备份交换机（alternate-exchange）介绍
RabbitMQ之备份交换机(alternate-exchange) 1.备份交换器,AlternateExchange(AE) 备份交换器是为了实现没有路由到队列的消息,声明交换机的时候添加属性al ...
- Linux下使用docker 拉取 vsftpd 镜像搭建 Ftp 服务器，连接 Ftp 时遇到的错误（425 Failed to establish connection）
Ftp踩坑系列: Linux上的ftp服务器 vsftpd 之配置满天飞--设置匿名用户访问(不弹出用户名密码框)以及其他用户可正常上传 ftp服务器Serv-U 设置允许自动创建不存在的目录 FTP ...
- 【转载】ssh-copy-id三步实现SSH无密码登录和ssh常用命令
ssh-keygen 产生公钥与私钥对 ssh-copy-id 将本机的公钥复制到远程机器的authorized_keys文件中,ssh-copy-id也能让你有到远程机器的home, ~./s ...
- 天下代码一大抄，整个案例的搬是什么鬼！疑似冒充蚂蚁金服高级Java开发工程师？你大爷
写在开始 上班前的第一件事,就是码云看看有什么消息,回复下网友的问题.如果看到喜欢的项目会点进去瞅瞅,然后就开始一天的工作. 然而,这一天的工作并不开心,一个今日热门项目让自己很恼火,一开始感觉并没有 ...