Maison > Article > développement back-end > À propos de innerWidth et innerHeight de JavaScript

À propos de innerWidth et innerHeight de JavaScript

一个新手original: 2017-10-12 09:19:391414parcourir

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;         //分别定义width和height接收窗口的高和宽
     alert(width);        //窗口的宽度 1920px
     alert(height);   　　//窗口的高度  950px

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

Cette fois, le blogueur a supprimé la barre des tâches (en fait cachée) et la barre d'outils à tour de rôle. . Tabulez et appuyez sur F12 plus 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, s'il n'y en a pas. menu Si des facteurs externes tels que des barres et des barres d'outils le pressent, il s'étendra automatiquement. S'il y en a, appuyez simplement sur la fenêtre 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>=
                     width=window.innerWidth,height=
                     alert(height);   　　</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. Elle fait toujours 1920px

. Conclusion finale : innerHeight et innerWidth obtiennent la hauteur et la largeur du formulaire. Les 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) n'auront aucun impact dessus

Parlons d'IE, qui a le plus de défauts. Le problème de la compatibilité d'IE peut être résolu de cette manière

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：Explication détaillée de l'installation et de la configuration d'Apache, php7 et mysql5.7 dans CentOS7Article suivant：Explication détaillée de l'installation et de la configuration d'Apache, php7 et mysql5.7 dans CentOS7

Articles Liés

Voir plus