Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Verwendung von innerWidth und innerHeight in JavaScript

Detaillierte Erläuterung der Verwendung von innerWidth und innerHeight in JavaScript

小云云Original: 2018-01-24 15:46:181523Durchsuche

Dieser Artikel enthält hauptsächlich eine kurze Diskussion über innerWidth und innerHeight von JavaScript. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Attribute innerWidth und innerHeight

Beschreibung: Das schreibgeschützte Attribut des Fensterobjekts gibt die Höhe und Breite des Dokumentanzeigebereichs des Fensters an, gemessen in Pixel ( px). (Hinweis: Die Breite und Höhe hier umfassen nicht die Höhe der Menüleiste, Symbolleiste, Bildlaufleiste usw.)

Die folgenden beiden Eigenschaften werden überprüft:

Die Bildschirmauflösung ist : 1920x1080 Browser: QQ-Browser (Kernel ist Chrome) Der Code lautet wie folgt:

var width=window.innerWidth,height=window.innerHeight; //Definieren Sie Breite bzw. Höhe, um die Höhe und Breite von zu erhalten das Fenster

alert(width); //Die Breite des Fensters beträgt 1920px

alert(height); //Die Höhe des Fensters beträgt 950px

innerWidth, da auf beiden Seiten des Browsers keine Hindernisse vorhanden sind, sodass die Bildschirmbreite von 1920 perfekt erreicht wird, und innerHeight um 130 Pixel verkleinert wird, da im Browser eine Symbolleiste und auf dem Anzeigebildschirm eine Taskleiste vorhanden ist

Dieses Mal entfernte der Blogger nacheinander die Taskleiste (tatsächlich ist sie ausgeblendet) und die Registerkarte in der Symbolleiste und drückte F12 und fügte Entwickleroptionen hinzu, um es erneut zu testen:

/*————————干掉任务栏后————————*/
  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

Fazit : Dies bedeutet, dass innerHeight und innerWidth nur die Pixel des Anzeigefensters zählen. Wenn dies nicht der Fall ist, wird es automatisch erweitert, wenn externe Faktoren wie Menüleisten und Symbolleisten dies tun Testen wir die externen Faktoren, testen wir die interne Bildlaufleiste

Fazit: Es zeigt, dass die interne Bildlaufleiste keinen Einfluss auf die innere Breite hat. Selbst wenn sie vorhanden ist, hat sie keinen Einfluss immer noch 1920px

<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>

Abschließende Schlussfolgerung: innerHeight und innerWidth ermitteln die Höhe des Formulars. Mit der Breite haben externe Faktoren wie (Browser-Entwickleroptionen, Favoriten) einen Einfluss darauf, während interne Faktoren (Bildlaufleisten) einen Einfluss darauf haben keine Auswirkung darauf

Lassen Sie uns über den IE mit den meisten Fehlern sprechen. Das Problem der IE-Kompatibilität kann folgendermaßen gelöst werden

Verwandte Empfehlungen:

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

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

 if (document.compatMode == 'CSS1Compat') {   //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);

Über innerWidth und innerHeight von JavaScript

Instanz der Verwendung der innerWidth()-Methode in jQuery_jquery

Instanz der Verwendung von innerHeight() Methode in jQuery_jquery

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von innerWidth und innerHeight in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript chrome var 对象 alert

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erklärung zur Verwendung des es6-DreipunktoperatorsNächster Artikel：Ausführliche Erklärung zur Verwendung des es6-Dreipunktoperators

In Verbindung stehende Artikel

Mehr sehen