scrollHeight scrollWidth clientHeight clientWidth

很多时候需要获得当前浏览器窗口大小，以获得好的页面布局，查查帮助无非就是：

 

Html代码 复制代码
  1. <SPAN style="FONT-SIZE: small">document.body.scrollHeight    
  2. document.body.scrollWidth    
  3. document.body.clientHeight    
  4. document.body.clientWidth   
  5. document.documentElement.scrollHeight   
  6. document.documentElement.scrollWidth   
  7. document.documentElement.clientHeight   
  8. document.documentElement.clientWidth</SPAN>  

 在使用上面的方法时必须得注意，文档是否定义了DOCTYPE，检测是否定义DOCTYPE使用：

 

Html代码 复制代码
  1. <SPAN style="FONT-SIZE: small">document.compatMode</SPAN>  

 
其返回两种类型：BackCompat，CSS1Compat , 当文档类型定义了DOCTYPE时返回CSS1Compat

文档定义了DOCTYPE时使用：

Html代码 复制代码
  1. <SPAN style="FONT-SIZE: small">document.documentElement.scrollHeight    
  2. document.documentElement.scrollWidth    
  3. document.documentElement.clientHeight    
  4. document.documentElement.clientWidth</SPAN>  

 否则使用：

Java代码 复制代码
  1. <SPAN style="FONT-SIZE: small">document.body.scrollHeight    
  2. document.body.scrollWidth   
  3. document.body.clientHeight    
  4. document.body.clientWidth</SPAN>  

 但是，问题远没有这么简单，看看这个简单的页面的效果：

Html代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
  2. <html>    
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
  5.         <title>scrollHeight,clientHeight,scrollWidth,clientWidth</title>    
  6.         <script type="text/javascript" language="javascript">    
  7.             function but_click1()    
  8.             {    
  9.                 alert((document.compatMode != "CSS1Compat") ? document.body.scrollHeight : document.documentElement.scrollHeight);    
  10.             }    
  11.             function but_click2()    
  12.             {    
  13.                 alert((document.compatMode != "CSS1Compat") ? document.body.clientHeight : document.documentElement.clientHeight);    
  14.             }    
  15.             function but_click3()    
  16.             {    
  17.                 alert((document.compatMode != "CSS1Compat") ? document.body.scrollWidth : document.documentElement.scrollWidth);    
  18.             }    
  19.             function but_click4()    
  20.             {    
  21.                 alert((document.compatMode != "CSS1Compat") ? document.body.clientWidth : document.documentElement.clientWidth);    
  22.             }    
  23.         </script>    
  24.     </head>    
  25.     <body style="margin:0;overflow-x:hidden;overflow-y:hidden">    
  26.         <input type="button" height=40px onclick="but_click2()" value="clientHight" >    
  27.         <br>    
  28.         <input type="button" height=40px onclick="but_click4()" value="clientWidth" >    
  29.         <br>    
  30.         <input type="button" height=40px onclick="but_click1()" value="scrollHeight" >    
  31.         <br>    
  32.         <input type="button" height=40px onclick="but_click3()" value="scrollWidth" >    
  33.     </body>    
  34. </html>  

 

    这个页面使用不同的浏览器打开，在ie7下无论是否定义DOCTYPE，scrollHeight获得的值都不会变化；同样FF也没有影响；只有对chrome有影响。当你实际运行上面的代码时，你还会发现3种浏览器中获得的值居然也不同！

    结果大致是这样:
         scrollHeight
         有文档类型定义
             在chrome 返回的是页面控件高度的和
             在ie下   返回的是页面控件高度的和
             在firefox 下返回整个窗口高度
         scrollHeight
         没有文档类型定义
             在chrome 返回整个窗口实际高度
             在ie     返回的是页面控件高度的和
             在firefox下返回整个窗口高度

 

    scrollWidth 在有无DOCTYPE还是在不同浏览器上结果基本一致，IE偏小，不知道是不是右侧的scrollbar影响了结果，我猜的^_^

    也就是说无论在有无DOCTYPE定义的页面，在ie下用scrollHeight获得不了窗口高度,这时候就需要使用clientHeight来获得窗口高度！clientHeight效果基本一致。

    反正我也说不明白那个浏览器更遵守规范，它们只会让你头疼。现在终于明白了为什么每次需求讨论都会头疼呢，写浏览器的大牛们对规范理解还有这么大偏差，何况同样的事由不同的人去描述，更何况里面还有鸟人呢！