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那部分把我弄糊涂了. 原书是这样写的:( //宽度同理,就不仔细描述了.) ...
随机推荐
- tinymce插件preview改造增加全屏按钮
近期需要用到tinymce的preview插件,但preview出来的界面太小了,通过投影仪出来看的不清晰,于是想在preview的预览界面中增加全屏.放大和缩小的按钮,改造内容如下: 由于previ ...
- SQL- SQL查询检索阶段一
一 说明 如果是初学者,建议去网上寻找安装Mysql的文章安装,以及使用navicat连接数据库,以后的示例基本是使用mysql数据库管理系统: 二 准备前提 需要建立一张学生表,列分别是id,名称, ...
- idea2019注册码，亲测可用！
2019已经过半了,最近可把我忙死了,好久没打理这里的留言了. 今天登上来,看到许多同学反馈按照之前的那篇文章 IntelliJ IDEA 2018激活码 永久破解 里的步骤无法破解idea,其实用这 ...
- 二维码生成插件qrious
1.qrious是基于canvas的纯JS二维码生成插件 1.1什么是二维码 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的B ...
- linux中批量添加文件前缀的操作
需要在文件夹内所有txt文件的文件名前面添加"gt_"; 就是由原来的文件“xxx.txt”变成“gt_xxx.txt”: 网上搜来的脚本如下: for i in `ls`; do ...
- Java 包(package)的概念及实例
包的作用 1.把功能相似或相关的类或接口组织在同一个包中,方便类的查找和使用. 2.如同文件夹一样,包也采用了树形目录的存储方式.同一个包中的类名字是不同的,不同的包中的类的名字是可以相同的,当同时调 ...
- IT兄弟连 HTML5教程 在移动设备上设置原始大小显示
在iPhone系列和iPod Touch中使用的是Safari浏览器,它支持前面介绍的媒体查询表达式.例如,使用iPhone 320px×480px的分辨率去访问我们前面的布局示例,却无法得到我们想看 ...
- C#/.Net开发入门篇（2）——第一个控制台应用程序
相信看了上一篇文章的小伙伴已经安装好自己的开发工具了VS了,这一篇文章就教大家怎么创建第一个应用程序. 下面大家跟着我的操作一起来创建自己的第一个应用程序吧 一.打开VS工具点击左上角的文件→新建→项 ...
- VS 2017 代码报错编译正常
今天遇到一个奇葩的错误,代码报红波浪线错误,但编译正常,程序能正常运行; 解决方法 在项目引用中把报错的代码所在项目先移除,再重新引用,然后编译一下就好了
- 松软科技web课堂:JavaScript If...Else 语句
条件语句用于基于不同条件执行不同的动作. 条件语句 在您写代码时,经常会需要基于不同判断执行不同的动作. 您可以在代码中使用条件语句来实现这一点. 在 JavaScript 中,我们可使用如下条件语句 ...