Maison >interface Web >js tutoriel >Explication détaillée de l'utilisation de innerWidth et innerHeight en JavaScript

Explication détaillée de l'utilisation de innerWidth et innerHeight en JavaScript

小云云original: 2018-01-24 15:46:181606parcourir

Cet article vous apporte principalement une brève discussion sur innerWidth et innerHeight de JavaScript. L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Attributs innerWidth et innerHeight

Description : L'attribut en lecture seule de l'objet window déclare la hauteur et la largeur de la zone d'affichage du document de la fenêtre, mesurées en pixels ( px). (Remarque : la largeur et la hauteur ici n'incluent pas la hauteur de la barre de menu, de la barre d'outils, de la barre de défilement, etc.)

Ce qui suit vérifiera ces deux propriétés :

La résolution de l'écran est : 1920x1080 Navigateur : navigateur QQ (le noyau est Chrome) Le code est le suivant :

var width=window.innerWidth,height=window.innerHeight //Définissez respectivement la largeur et la hauteur pour recevoir la hauteur et la largeur de the window

alert(width); //La largeur de la fenêtre est de 1920px

alert(height); //La hauteur de la fenêtre est de 950px

innerWidth car il n'y a aucune obstruction des deux côtés du navigateur, donc la largeur d'écran de 1920 est parfaitement obtenue, et innerHeight est réduite de 130px car il y a une barre d'outils sur le navigateur et une barre des tâches sur l'écran d'affichage

Cette fois le blogueur a supprimé tour à tour la barre des tâches (en fait, elle est masquée) et l'onglet dans la barre d'outils et appuyez sur F12 et ajoutez les options du développeur pour tester à nouveau :

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

Conclusion : Cela signifie que innerHeight et innerWidth ne comptent que les pixels de la fenêtre d'affichage, sinon si des facteurs externes tels que les barres de menus et les barres d'outils la pressent, elle s'étendra automatiquement. S'il y en a, appuyez simplement sur la fenêtre d'affichage

Après. en testant les facteurs externes, testons la barre de défilement des facteurs internes

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

Conclusion : Cela montre que la barre de défilement interne n'a aucun effet sur innerWidth Même si elle existe, elle n'a aucun effet sur la largeur. toujours 1920px

Conclusion finale : innerHeight et innerWidth obtiennent la hauteur du formulaire. Avec la largeur, des facteurs externes tels que (options du développeur du navigateur, favoris) auront un impact sur celui-ci, tandis que les facteurs internes (barres de défilement) le seront. n'ont aucun impact dessus

Parlons d'IE avec le plus de défauts, de Le problème de compatibilité IE peut être résolu comme ceci

//兼容代码可以这样子写
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);

Recommandations associées :

À propos de innerWidth et innerHeight de JavaScript

Instance d'utilisation de la méthode innerWidth() dans jQuery_jquery

Instance d'utilisation de innerHeight( ) méthode dans jQuery_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript chrome var 对象 alert

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de la façon d'utiliser l'opérateur à trois points es6Article suivant：Explication détaillée de la façon d'utiliser l'opérateur à trois points es6

Articles Liés

Voir plus