为什么window.innerHeight和document.body.clientHeight的值会不一样呢？
天问_0004
2014-11-18 08:37
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript">
document.write(window.innerHeight+"<br/>"+window.innerWidth+"<br/>");
document.write(document.body.clientHeight+"<br/>"+document.body.clientWidth);
</script>
</body>
</html>
4回答
-
- 不再使用
- 2017-02-24 23:40:35
其实原因是：
滚动条！！！
你打开缩小窗口使得横纵都出现滚动条，会发现window.inner宽高总是比document.body.client宽高（firefox是document.documentElement.client宽高）多一个固定值（这个和各个浏览器有关），比如是站也10px差距吧。
你把窗口拉大到滚动条消失（由于网页一般不止一屏那么长，所以纵向实验不好做，可以选百度或谷歌首页），再查询，会发现二者一致了。
所以呢你这innerHeight实际是比clientHeight多了个滚动条的height。
-
- 不要这样看着我
- 2016-12-12 15:21:24
使用document.documentElement.clientHeight
在compactMode为CSS1Compat时,document.documentElement.clientHeight = window.innerHeight -
- TJcfeeL0
- 2015-11-06 10:55:37
确实不一样为什么呢
-
- 偌颜宁
- 2014-11-18 13:39:59
是有区别的前者是获取HTML的宽高，后者是获取body的宽高，分为两种写法就是为了解决兼容性问题，某些浏览器只认这两种的一种
JavaScript进阶篇
468065 学习 · 21891 问题
相似问题