首頁 > 文章 > web前端 > JavaScript中的innerWidth和innerHeight的詳解

JavaScript中的innerWidth和innerHeight的詳解

黄舟原創: 2017-10-12 10:50:461709瀏覽

下面小編就為大家帶來一篇淺談JavaScript的innerWidth與innerHeight。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧

innerWidth與innerHeight屬性

說明：window物件的只讀屬性,聲明了視窗的文檔顯示區的高度和寬度，以像素(px)為計量單位。 (注意：這裡的寬度和高度不包括選單列、工具列以及滾動條等的高度)

#下面便對這兩個屬性進行驗證：

#螢幕解析度為：1920x1080 瀏覽器：QQ瀏覽器(核心是Chrome) 程式碼如下：

var width=window.innerWidth,height=window.innerHeight; //分別定義width=window.innerWidth,height=window.innerHeight; //分別定義width和height接收視窗的高和寬

alert(width); //視窗的寬度1920px

alert(height); 　　//視窗的高度950px

innerWidth因為瀏覽器兩旁沒有遮擋物,所以完美的得到了屏幕的寬度1920,而innerHeight因為瀏覽器上面有工具列,顯示屏又有任務欄,所以被擠掉了130px

#這次部落客依序幹掉了工作列(其實就是隱藏了)和工具列中的標籤頁並按下F12加上了開發者選項再次進行測試：

/*————————干掉任务栏后————————*/
  var width=window.innerWidth,height=window.innerHeight;  
  alert(width);  //宽度没有变化,还是1920px
  alert(height); 　　//而窗口的高度990px,表明任务栏占40px(任务栏的默认高度) 导致没有获取到全部高度

  /*————————又干掉标签页后，并加上开发者选项后————————*/
  var width=window.innerWidth,height=window.innerHeight;
  alert(width);  //1381px,说明浏览器开发者选项,对innerWidth有影响 1920-1381=549px 
  alert(height); 　　//而窗口的高度979px,任务栏占40px,标签页占了11px(990-979) 而由此得出剩下的工具栏占了1080-979=101px

結論：說明innerHeight和innerWidth確實只計算顯示視窗像素,如果沒有選單列、工具列等外部因素擠壓它,它就會自動延伸,而如果有就只按顯示窗體走

測試完外部的因素,下面測試一下內部的因素滾動條

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
  <title>测试innerHeight属性</title>
   
  </head>
  
  <body>
  <p style="width:500px;height:1300px;background-color:red;"></p>
  
  <script>  
    window.onload=function(){
     /*————————p超出长度,带着滚动条后————————*/
     var width=window.innerWidth,height=window.innerHeight;  
      alert(width);  //窗口的宽度 1920px
      alert(height); 　　//窗口的高度 950px
   }
   </script>
  </body>

　　 </html>

結論：說明內部的捲軸對innerWidth並沒有影響,即使存在對width也沒有影響,依舊是1920px

最終結論：innerHeight與innerWidth取得的是窗體的高與寬,外部因素如(瀏覽器開發者選項,收藏夾)會對它有影響,而內部因素(捲軸)則對其沒有影響

下面說一下槽點最多的IE，關於IE相容性的問題，可以這樣解決

//兼容代码可以这样子写
var width = window.innerWidth,height = window.innerHeight;

if (typeof width != &#39;number&#39;) {  //如果类型不为number,表示该浏览器不支持innerWidth属性

 if (document.compatMode == &#39;CSS1Compat&#39;) {   //CSS1Compat：判断是否为标准兼容模式。

  width = document.documentElement.clientWidth;

  height = document.docuementElement.clientHeight;

 } else { //不是标准模式,则有可能是IE6或及其以下版本(早期的浏览器对css进行解析时，并未遵守W3C标准)

  width = document.body.clientWidth;   //网页可见区域宽

  height = document.body.clientHeight;   //网页可见区域高
}
  alert(width);
  alert(height);

以上是JavaScript中的innerWidth和innerHeight的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：rem絕對自適應方案解析下一篇：rem絕對自適應方案解析

看更多