Maison > Article > interface Web > Explication détaillée de innerWidth et innerHeight en JavaScript

Explication détaillée de innerWidth et innerHeight en JavaScript

黄舟original: 2017-10-12 10:50:461707parcourir

L'éditeur suivant vous présentera une brève discussion sur innerWidth et innerHeight de JavaScript. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œil.

Propriétés innerWidth et innerHeight

Description : L'attribut en lecture seule de l'objet window déclare le document de la fenêtre La hauteur et la largeur de la zone d'affichage, mesurées en pixels (px). (Remarque : la largeur et la hauteur ici n'incluent pas la hauteur des barres de menus, des barres d'outils, des barres 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; //define width; respectivement et height reçoivent la hauteur et la largeur de la fenêtre

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

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

Le innerWidth obtient parfaitement la largeur d'écran de 1920 car il n'y a aucune obstruction des deux côtés du navigateur, tandis que le innerHeight est évincé de 130px car il y a une barre d'outils sur le navigateur et un barre des tâches à l'écran

Cette fois, le blogueur a supprimé la barre des tâches (en fait cachée) et les onglets de la barre d'outils, a appuyé sur F12 et a ajouté des options de développement 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 : Expliquez que innerHeight et innerWidth ne calculent que les pixels de la fenêtre d'affichage. S'il n'y a pas de facteurs externes tels que les barres de menus et les barres d'outils pour les compresser, cela est nécessaire. s'étendra automatiquement. , et si c'est le cas, appuyez simplement sur le formulaire d'affichage

Après avoir testé 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 signifie 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. Elle fait toujours 1920px

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

Parlons d'IE qui a le plus de défauts. Concernant le problème de compatibilité avec IE, il peut être résolu comme ça

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!

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：analyse de solution adaptative absolue remArticle suivant：analyse de solution adaptative absolue rem

Articles Liés

Voir plus