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那部分把我弄糊涂了. 原书是这样写的:( //宽度同理,就不仔细描述了.) ...
随机推荐
- drf源码分析系列---版本控制
版本的使用 第一步:写路由url(r'^api/(P<version>\w+)/user/$',views.UserView.as_view()), 第二步:写模块导入from rest_ ...
- SQL中Group By和having的用法
转自 ITGirl笑笑 一.GROUP BY GROUP BY语句用来与聚合函数(aggregate functions such as COUNT, SUM, AVG, MIN, or MAX. ...
- php使用phpqrcode生成二维码
前期准备: 1.phpqrcode类文件下载,下载地址:https://sourceforge.net/projects/phpqrcode/2.PHP环境必须开启支持GD2扩展库支持(一般情况下都是 ...
- django基础之day09，Forms组件在程序中做了哪些事？ 校验数据、渲染标签、展示信息
******************************* Forms组件 *************************************************** Forms组件在 ...
- 牛客NOIP暑期七天营-提高组2
第一题:ACGT 题目链接:https://ac.nowcoder.com/acm/contest/931/A trie树.hash.map遍历 ①.trie树上的节点多记一个rest值表示还有多少 ...
- 【搞定Jvm面试】 面试官：谈谈 JVM 类文件结构的认识
类文件结构 一 概述 在 Java 中,JVM 可以理解的代码就叫做字节码(即扩展名为 .class 的文件),它不面向任何特定的处理器,只面向虚拟机.Java 语言通过字节码的方式,在一定程度上解决 ...
- 《Java基础知识》Java技术总结
1. Java 知识点总结 Java标示符.保留字和数制:https://www.cnblogs.com/jssj/p/11114041.html Java数据类型以及变量的定义:https://ww ...
- CSS 计数器详解
在前端开发中总少不了列表项,对于列表项序号,射鸡师一般会列出个1,2,3...序号.在不了解css计数器属性之前,我一般会用精灵图,用类名来区分序列号图片.这样做尽管可以达到目的,但是很不方便,开发过 ...
- Hive脚本中切勿使用/**/注释
Hive脚本中切勿使用/**/注释 Hive脚本的注释目前好像只有 -- ,我之前在做初版数据的时候 使用NotePad++ 习惯性的有时候注释会写成 /**/ ,然后就引发了问题 脚本上传到hue, ...
- IT兄弟连 HTML5教程 使用盒子模型设计页面布局
布局所涉及的技术非常很多,足以另写单独的一本书了.在本节中主要介绍网站中最常用的布局方案,包括区块框居中.两列浮动.三列浮动及多列浮动的区块框. 1 居中设计 区块框居中的设计是在网页布局中常用的技 ...