window.innerHeight属性和用法

是什么

innerHeight 和 innerWidth 都是window 的属性,
表示文档显示区域的宽高,不包括工具栏等

怎么获取

最新的浏览器都可以用window.innerHeight获取

兼容性

这个属性ie9+支持,其他的不支持
可以这样获取:
console.log(document.documentElement.clientHeight)
或者这样:
console.log(document.body.clientHeight)
两者区别:

  • 文档中没有文档,那么document.body.clientHeight=0
  • document.body.clientHeight 显示的是文档中已有内容撑开的区域
  • window.innerHeight 和 ie的document.documentElement.clientHeight显示的是文档的区域
  • 就算里面没有内容,也是显示出应有的数值

与clientHeight的区别

  • window.innerHeight属于BOM(浏览器对象模型),而document.documentElement.clientHeight属于文档对象模型
  • window.innerHeight获取的高度包含横向滚动条,而document.documentElement.clientHeight不包含横向滚动条
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
			}
			div{
				width: 100%;
				height: 100%;
				background: lightblue;
			}
		</style>
	</head>
	<body>
		<div></div>
		<script type="text/javascript">
			console.log('innerHeight'+window.innerHeight);//innerHeight502
			console.log('clientHeight'+document.documentElement.clientHeight);//clientHeight502
		</script>
	</body>
</html>

此时打印结果:
innerHeight502
clientHeight502
当出现横向的滚动条的时候,ocument.documentElement.clientHeight所获得的高度就不包含滚动条的高度
此时打印结果:
innerHeight502
clientHeight485
可以看到document.documentElement.clientHeight的高度少了一些,原因就是document.documentElement.clientHeight不包括横向滚动条

posted @ 2020-02-10 16:16  香荣如梦  阅读(14774)  评论(0编辑  收藏  举报