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

时间:2023-03-08 18:18:03

在我看《JavaScript高级程序设计》(第三版)的时候,在clientHeightscrollHeight那部分把我弄糊涂了。

原书是这样写的:( //宽度同理,就不仔细描述了。)

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

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

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

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

 <!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{ height: 3000px;} //让文档的大小产生滚动条,高度为3000px;
</style>
</head>
<body> </body>
</html>

接着就是实验环节

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

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

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

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

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