js及innerWidth、innerHeight、outerWidth和outerHeight属性

女爷i 2022-07-14 01:57 74阅读 0赞

跨浏览器确定一个窗口的大小不是一件简单的事。Firefox.Safari.Opera和Chrome均为此提供了4个属性：innerWidth、innerHeight、 outerWidth和outerHeight。  
在Safari和Firefox中，outerWidth和outerHeight返回浏览器窗口本身的尺寸（无论是从最外层的window对象还是从某个框架访问）。  
Opera中，这两个属性的值表示页面视图容器①的大小。而innerWidth和innerHeight则表示该容器中页面视图区的大小（减去边框宽度）。  
Chrome中，outerWidth.outerHeight与innerWidth，innerHeight返回相同的值，即视口(viewport)大小而非浏览器窗口大小。  
   IE没有提供取得当前浏览器窗口尺寸的属性；不过，它通过DOM提供了页面可见区域的相关信息。  
   在IE以及Firefox、Safari、Opera和Chrome中，document.documentElement.clientWidth和  
document.documentElement.clientHeight中保存了页面视口的信息。  
IE6中，这些属性必须在标准模式下才有效；如果是混杂模式，就必须通过do crunent.body.clientWidth和document.body.clientHeight取得相同信息。而对于混杂模式下的Chrome，则无论通过docurnent.documentElement还是document.body中的clientWidth和clientHeight属性，都可以取得视口的大小。  
       虽然最终无法确定浏览器窗口本身的大小，但却可以取得页面视口的大小，如下所示：  
       var pageWidth=windows.innerWidth,  
       pageHeight=windows.innerHeight;  
       if ( typeof pageWidth !="number")t  
       if ( document.compatMode== "CSSICompat")\{   
       pageWidth=document.documentElement.clientWidth;  
       pageHeight=document.documentElement.clientHeight;  
       \} else\{   
       pageWidth=document.body.clientWidth;  
       pageHeight=document.body.clientHeight;  
       \}  
       \}  
   在以上代码中，我们首先将windows.innerWidth和windows.innerHeight的值分别赋给了pageWidth和pageHeight。然后检查pageWidth中保存的是不是一个数值；认为如果不是，则通过检查document.compatMode来确定页面是否处于标准模式。如果是，则分别使用document.documentElement.clientWidth和document.documentElement.clientHeight的直。否则，就使用document.body.clientWidth和document.body.clientHeight的值。  
  
如果要写在组件，取得长款，可以应用如下：  
aa.common.getViewportSize = \{   
    w: function()\{   
        return (windows.innerWidth) ? windows.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth;  
    \},  
    h: function()\{ return (windows.innerHeight) ? windows.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;\}

\};

有时我们需要获得浏览器窗口或屏幕的大小、窗口下拉框下拉的距离等数据，对应这些需求，js中提供了不少解决方法，只是数量稍多容易混淆它们各自的意义，下面咱们用图例来解释下12个常见对象属性的作用。

其中有6个常用的浏览器窗体属性 *（由于offsetWidth/Height在不同浏览器下表现有出入，故不在本章讨论） *：

document.documentElement.clientWidth

document.documentElement.clientHeight

document.documentElement.scrollWidth

document.documentElement.scrollHeight

document.body.scrollTop

document.body.scrollLeft

和6个常用的屏幕对象属性：

window.screen.width

window.screen.height

window.screenTop

window.screenLeft

window.screen.availHeight

window.screen.availWidth

先贴下代码，方便各位先调试看下结果，要注意的地方是务必确保js代码在页面加载后才执行（放到最后面就得了），不然会出现body未加载完成则执行js代码，导致某些属性返回值为undefined：

![7JJJry.gif][]

1 <html>
     2 <head>
     3 <meta charset="utf-8">
     4 <title>无标题文档</title>
     5 <style>
     6 body{ 
     7 margin:0;
     8 }
     9 </style>
    10 
    11 
    12 </head>
    13 <body>
    14 <div id="dd" style="width:2000px; height:1800px; margin:0;">
    15 啧啧，随便写点内容呗<br/><br/><br/>啧啧，随便写点内容呗啧啧，随便写点内容呗啧啧，随便写点内容呗<br/><br/><br/>啧啧，随便写点内容呗<br/><br/><br/>
    16 啧啧，随便写点内容呗<br/><br/><br/>啧啧，随便写点内容呗啧啧，随便写点内容呗啧啧，随便写点内容呗<br/><br/><br/>啧啧，随便写点内容呗<br/><br/><br/>
    17 啧啧，随便写点内容呗<br/><br/><br/>啧啧，随便写点内容呗<br/><br/><br/>啧啧，随便写点内容呗啧啧，随便写点内容呗啧啧，随便写点内容呗
    18 </div>
    19 </body>
    20 <script>
    21 console.log(document.documentElement.clientWidth+" "+document.documentElement.clientHeight+" "+document.documentElement.scrollWidth+" "
    22 +document.documentElement.scrollHeight+" "+document.body.scrollTop+" "+document.body.scrollLeft 23 +" "+window.screen.width+" "+window.screen.height+" "+window.screenTop+" "+window.screenLeft 24 +" "+window.screen.availHeight+" "+window.screen.availWidth 25 ); 26 </script>
    27 </html>

![rUR7J3.jpg_web][]

⑴ document.documentElement.clientWidth 和 document.documentElement.clientHeight 是获取浏览器当前窗口视图区域（也就是说不包括工具栏、滚动条等）的实际宽高（旧的HTML标准是写作document.body.clientWidth/clientHeight，已过时，建议大家用新标准来描述）：

![yyUbyiI.jpg_web][]

⑵ document.documentElement.scrollWidth 和 document.documentElement.scrollHeight 是整个网页大大小，包括可视区域和被卷起来的区域，网页整体就是了（在这例子里我们是设置div宽高分别为2000px和1800px的）：

![nYJVvy.jpg_web][]

⑶ document.body.scrollTop 和 document.body.scrollLeft 是整个网页的上方或者左边被卷起来的部分（注意这里中间部分是body而不再是documentElement）：

![NnyAJn.jpg_web][]

有人问，那我要获取网页被卷起来的下部分或者右部分怎么办？

答案很简单，比如你要得到网页被卷起来的下部分，就用整个网页的高document.documentElement.scrollHeight减去网页上方被卷起来的部分document.body.scrollTop，再减去当前浏览器视图区域高度document.documentElement.clientHeight即可

⑷ window.screen.width 和 window.screen.height 是获取你整个显示器屏幕大小的（我的显示器分辨率为1680\*1050）：

![JRVZzi.jpg_web][]

⑸ window.screenTop 和 window.screenLeft 是浏览器窗口顶部/左端距离屏幕大小的：

![qYvA7j.jpg_web][]

⑹ window.screen.availHeight 和 window.screen.availWidth 是用户屏幕实际工作区（减去任务栏等非工作区模块大小）的高和宽：

![ziqIFj.jpg_web][]

OK这12个属性都介绍完了，其实用的最多的还是前6个跟浏览器和网页密切关联的属性，后面几个屏幕相关的属性用的比较少吧（比如设置弹出广告窗口和屏幕顶端的距离什么的），感觉记好前六个就行啦。

[7JJJry.gif]: http://img1.tuicool.com/7JJJry.gif
[rUR7J3.jpg_web]: http://img1.tuicool.com/rUR7J3.jpg!web
[yyUbyiI.jpg_web]: http://img0.tuicool.com/yyUbyiI.jpg!web
[nYJVvy.jpg_web]: http://img2.tuicool.com/nYJVvy.jpg!web
[NnyAJn.jpg_web]: http://img0.tuicool.com/NnyAJn.jpg!web
[JRVZzi.jpg_web]: http://img2.tuicool.com/JRVZzi.jpg!web
[qYvA7j.jpg_web]: http://img0.tuicool.com/qYvA7j.jpg!web
[ziqIFj.jpg_web]: http://img0.tuicool.com/ziqIFj.jpg!web