document.documentElement.clientHeight||document.documentElement.scrollHeight

最新推荐文章于 2024-03-22 14:25:18 发布

weixin_30363509

最新推荐文章于 2024-03-22 14:25:18 发布

阅读量158

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/YikaJ/p/3996290.html

版权

在我看《JavaScript高级程序设计》（第三版）的时候，在clientHeight和scrollHeight那部分把我弄糊涂了。

原书是这样写的：（ //宽度同理，就不仔细描述了。）

　　“对于不包含滚动条的页面来说,scrollHeight和clientHeight之间的关系不明确。在基于document.docuemntElement查看模式下，各个浏览器表现出不一样的性质。

在FF下，这两组属性始终相等，是文档实际大小，非视口大小。
在Opera、safari、Chorme中，scrollHeight是视口大小，而clientHeight是文档大小。
在IE非标准模式中，scrollHeight是文档大小，clientHeight是视口大小。”

经过我亲手实验，我把结论写在下面。

先新建一个文档，并通过样式表，让文档高度等于3000px

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style type="text/css">
 5     body{ height: 3000px;}   //让文档的大小产生滚动条，高度为3000px;
 6 </style>
 7 </head>
 8 <body>
 9    
10 </body>
11 </html>

接着就是实验环节

1 <script>
2 window.onload = function(){
3         //大于IE7，safari,ff,chorme都显示为视口大小，随浏览器缩小而减小
4     alert(document.documentElement.clientHeight);
5         //始终等于文档的大小，小于IE7的显示为视口大小。
6     alert(document.documentElement.scrollHeight);
7 }
8 </script>

接着测试了一下基于document.body的模式下，无论大部分都是显示为body元素的height，3000px；

　　在IE下，document.body.clientHeight为3000，scrollHeight则不是。（要兼容低版本IE确实要一番功夫）

综上所述，在我们要获取文档实际高度时，最好用document.documentElement.scrollHeight。

　　　　　在我们要获取视口实际高度时，用document.documentElement.clientHeight。

转载于:https://www.cnblogs.com/YikaJ/p/3996290.html

weixin_30363509

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
document.documentElement.clientHeight||document.documentElement.scrollHeight

在我看《JavaScript高级程序设计》（第三版）的时候，在clientHeight和scrollHeight那部分把我弄糊涂了。原书是这样写的：（ //宽度同理，就不仔细描述了。）　　“对于不包含滚动条的页面来说,scrollHeight和clientHeight之间的关系不明确。在基于document.docuemntElement查看模式下，各个浏览器表现出不一样的性质。在...
复制链接

扫一扫