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那部分把我弄糊涂了. 原书是这样写的:( //宽度同理,就不仔细描述了.) ...
随机推荐
- angular实现draggable拖拽
前言:最近项目要实现一个拖拽功能,我在网上开始了各类搜寻,虽然后面因为数据原因舍弃了拖拽的这一需求,但是为了不辜负最近的研究,还是来记录一下. 场景需求:面试预约选时间节点,候选人之间是可以相互交换的 ...
- django----orm查询优化 MTV与MVC模型 choice参数 ajax serializers
目录 orm查询优化 only defer select_related 与 prefetch_related MTV 与 MVC 模型 choice参数 Ajax 前端代码 后端代码 前后端传输数据 ...
- CentOS7.2下部署zabbix4.0
整体部署采用centos7+php+apache+mariadb 基础环境配置优化 1. 关闭防火墙 [root@monitor_53 ~]$ systemctl stop firewalld [ro ...
- 超级详细Mysql安装步骤图解
数据库忘记装了,然后今天才装上.刚开始有点蒙蔽,进入mysql官网一堆英文,小声逼逼没有学号英语的我.废话不都说,直接上图 1.输入网址 https://www.mysql.com/downloads ...
- Vue与Django前后台分离跨域配置
一.跨域: 简单来说:如果前端向后端请求数据,前后端的的ip和端口都是不一致的,就是不在统一域名下,就出现了CORS跨域问题. 二.后台处理跨域 在django后台环境目录下安装插件: >: p ...
- VUE项目Eslint报错
前言:eslint很恶心的一个地方:你是否被各种语法报错一个标点符号,一个空格,一个回车......各种报错折磨着你! 加上编辑器 VS Code 的自动格式化稳稳的和Eslint冲突报错. 对此,我 ...
- 扫描枪连接zebra打印机打印条码标签无需电脑
在一些流水线生产的现场,需要及时打印条码标签,由于现场环境和空间限制,无法摆放电脑或者通过连接电脑来打印条码标签的速度太慢, 瑞科条码特提供了一套扫描枪直接连接条码打印机,扫描枪扫描条码之后直接打印输 ...
- IntelliJ IDEA 安装、配置和使用Lombok插件
Lombok 可用来帮助开发人员消除 Java 的重复代码,尤其是对于简单的 Java 对象(POJO),比如说getter/setter/toString等方法的编写.它通过注解实现这一目的.官网: ...
- jQuery随笔记录
DOM遍历 parent()方法返回所选元素的直接父元素.(parent() 只能遍历单个级别的 DOM树) parents()方法获取所选元素的所有祖先 children()所选元素 ...
- Android-再次解读萤石云视频
### 前言 我之前写过一篇萤石云的集成文章,很多人问我有没有demo, 今天我再次总结一下, 并加个些功能. - 集成步骤 - 视频预览播放 - 视频放大缩小 - 视频的质量切换 - 截图 - 视频 ...