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: 0;padding: 0;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不包括横向滚动条

转载于:https://www.cnblogs.com/suihang/p/11177093.html

window.innerHeight和document.documentElement.clientHeight区别相关推荐

document.body.clientHeight与document.documentElement.clientHeight
当你的网页有: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
document.body和document.documentElement的区别
document.body和document.documentElement的区别主要在<html>文件中有没有DTD声明. 详情参看<docuement.body和document ...
document.documentElement.clientHeight 与 document.body.clientHeight(杜绝千篇一律的抄袭!!)
document.documentElement.clientHeight 与 document.body.clientHeight用来获取页面可视高度我觉得有点问题.这两个应该不是一个东西. 页面中 ...
$(window).height() 和 $(document).height()的区别
$(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小, $(document).height()则代表 ...
window.location和document.location的区别分析
用户不能改变document.location(因为这是当前显示文档的位置).但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而 ...
window对象与document对象的区别
[window对象] 它是一个顶层对象,而不是另一个对象的属性,即浏览器的窗口. 属性 defaultStatus 缺省的状态条消息 document 当前显示的文档(该属性本身也是一个对象) fra ...
window.onload与$(document).ready()的区别
以浏览器装载文档为例,在页面加载完毕后,浏览器会通过Javascript为DOM元素添加事件.在常规的Javascript代码中,通常使用window.onload方法,而在Jquery中,使用 ...
window.onload与document.ready的区别
1. window.onload必须等到网页中所有的内容加载完(包含图片)才执行 document.ready网页中所有DOM结构绘制完执行,可能DOM并没有加载完所有document.ready比 ...
document.body、document.documentElement和window获取视窗大小的区别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...
7种Height的比较：screen.height, screen.availHeight, window.innerHeight, window.outerHeight....
这7种高度的基本含义: screen.height:用户屏幕高度 screen.availHeight:用户屏幕可用高度,减去了窗口工具值类的界面特征 window.innerHeight:浏览器窗口 ...

window.innerHeight和document.documentElement.clientHeight区别

window.innerHeight和document.documentElement.clientHeight区别相关推荐

最新文章

热门文章