简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > développement back-end > tutoriel php > le corps du texte

À propos de innerWidth et innerHeight de JavaScript

一个新手
Libérer： 2023-03-16 15:44:02
original
1413 Les gens l'ont consulté

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
Copier après la connexion

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
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées：
javascript
source：php.cn
Article précédent：Explication détaillée de l'installation et de la configuration d'Apache, php7 et mysql5.7 dans CentOS7 Article suivant：Exemple détaillé de la façon d'implémenter l'automatisation du déploiement à l'aide de Laravel en PHP
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1732
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
1887
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1600
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1511
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1548
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！