La hauteur et la largeur sont les dimensions les plus importantes lors de la conception de la mise en page d'une page Web.
La 'hauteur' indique la mesure de la longueur d'un objet de haut en bas tandis que la 'largeur' indique la largeur d'un objet d'un côté à l'autre. Ces facteurs aident à ajuster l'allocation d'un objet dans la fenêtre. En JavaScript, le ' hauteur ' et ' largeur Les propriétés sont en outre classées en deux catégories 'inner', c'est-à-dire 'innerHeight/innerWidth', et 'outer', c'est-à-dire 'outerHeight/outerWidth', respectivement.
Cet article détaille l'objectif et le fonctionnement de la propriété Window 'innerHeight' en JavaScript.
Que fait la propriété 'innerHeight' de la fenêtre en JavaScript ?
Le ' hauteurintérieure ' La propriété est associée à l'objet 'window' qui récupère la hauteur de la fenêtre d'affichage de la fenêtre du navigateur, à l'exclusion de la barre d'emplacement, de la barre d'outils, de la barre de menus et autres. En outre, il inclut la hauteur de la barre de défilement horizontale si elle est incluse. La valeur renvoyée de cette propriété est extraite de la fenêtre 'layout viewport', c'est-à-dire une zone qui affiche le contenu de la page Web.
Syntaxe de base
window.innerHeight OU innerHeight
Selon la syntaxe ci-dessus, le ' hauteurintérieure ” peut être facilement appliquée directement ou en utilisant l'objet “window”.
Implémentons la propriété définie ci-dessus pratiquement à l'aide de sa syntaxe de base.
Exemple 1 : Application de la propriété 'innerHeight' de la fenêtre pour renvoyer la hauteur de la fenêtre d'affichage de la fenêtre du navigateur
Cet exemple utilise la propriété 'innerHeight' avec l'objet 'window' pour récupérer la hauteur de la fenêtre du navigateur.
Code HTML
Tout d'abord, jetez un oeil au code ci-dessous:
< h2 > Propriété window innerHeight h2 >< bouton sur clic = 'jsFunc()' > Obtenir la hauteur bouton >
< p identifiant = 'pour' > p >
Dans les lignes de code ci-dessus :
- Le ' ” définit le sous-titre de niveau 2.
- Le '
» représente le bouton ayant un événement « onclick » pour invoquer la fonction « jsFunc() » lorsque l'événement est déclenché. - Le ' ” ajoute un paragraphe vide avec un identifiant “para” assigné pour afficher la valeur renvoyée de la propriété “innerHeight” appliquée.
Code Javascript
Maintenant, continuez avec le code ci-dessous :
< scénario >fonction jsFunc ( ) {
laisser h = window.innerHeight;
document.getElementById ( 'pour' ) .innerHTML = 'Hauteur intérieure de la fenêtre : ' +h ;
}
scénario >
Dans les lignes de code ci-dessus :
- Tout d'abord, définissez une fonction nommée ' jsFunc() ”.
- Dans sa définition, la variable « h » applique le « hauteurintérieure ” à l'aide de l'objet “window”.
- Après cela, appliquez le ' getElementById() ” pour obtenir le paragraphe vide ajouté en utilisant son identifiant “para” et y afficher la hauteur intérieure de la fenêtre actuelle du navigateur.
Sortir
Comme indiqué dans la sortie ci-dessus, la fenêtre actuelle du navigateur affiche la hauteur de la fenêtre (hauteur intérieure), c'est-à-dire ' 599px ” en cliquant sur le bouton.
Exemple 2 : Application des propriétés de fenêtre combinée « innerHeight » et « innerWidth »
La propriété 'innerHeight' peut être implémentée avec les autres propriétés de dimensions telles que 'innerWidth', 'outerWidth', 'outerHeight', etc. Dans ce scénario, elle est utilisée avec le ' largeurintérieure ' propriété.
Code HTML
Passons en revue le code HTML modifié :
< h2 > Propriétés de la fenêtre innerHeight et innerWidth h2 >< bouton sur clic = 'jsFunc()' > Obtenir la hauteur et la largeur bouton >
< p identifiant = 'pour' > p >
Ici, le contenu des éléments «
» et « » est modifié selon les besoins.
Code Javascript
Maintenant, survolez le code JavaScript :
< scénario >
fonction jsFunc ( ) {
laisser h = window.innerHeight;
laisser Dans = window.innerWidth;
document.getElementById ( 'pour' ) .innerHTML = 'hauteurintérieure : ' + h + '
largeurintérieure : ' + Dans ;
}
scénario >
Dans le code ci-dessus, à la fois le ' hauteurintérieure ' et ' largeurintérieure ” Les propriétés sont appliquées pour obtenir respectivement la hauteur et la largeur de la fenêtre du navigateur.
Sortir
Comme on le voit, la sortie spécifie la hauteur et la largeur de la fenêtre intérieure de la fenêtre actuelle du navigateur lors du clic sur le bouton.
Conclusion
Le Javascript ' fenêtre « l'objet offre une lecture seule » hauteurintérieure ” propriété qui peut être appliquée pour renvoyer la hauteur de la fenêtre d'affichage (intérieure) de la fenêtre du navigateur. Il n'inclut que la hauteur de la barre de défilement horizontale si elle est donnée. Sinon, il ne calcule la hauteur d'aucun autre élément disponible dans la fenêtre du navigateur. Cet article a fourni une brève description de l'objectif, du fonctionnement (avec une implémentation pratique) de la propriété 'innerHeight' de la fenêtre en JavaScript.
Code Javascript
Maintenant, survolez le code JavaScript :
< scénario >fonction jsFunc ( ) {
laisser h = window.innerHeight;
laisser Dans = window.innerWidth;
document.getElementById ( 'pour' ) .innerHTML = 'hauteurintérieure : ' + h + '
largeurintérieure : ' + Dans ;
}
scénario >
Dans le code ci-dessus, à la fois le ' hauteurintérieure ' et ' largeurintérieure ” Les propriétés sont appliquées pour obtenir respectivement la hauteur et la largeur de la fenêtre du navigateur.
Sortir
Comme on le voit, la sortie spécifie la hauteur et la largeur de la fenêtre intérieure de la fenêtre actuelle du navigateur lors du clic sur le bouton.
Conclusion
Le Javascript ' fenêtre « l'objet offre une lecture seule » hauteurintérieure ” propriété qui peut être appliquée pour renvoyer la hauteur de la fenêtre d'affichage (intérieure) de la fenêtre du navigateur. Il n'inclut que la hauteur de la barre de défilement horizontale si elle est donnée. Sinon, il ne calcule la hauteur d'aucun autre élément disponible dans la fenêtre du navigateur. Cet article a fourni une brève description de l'objectif, du fonctionnement (avec une implémentation pratique) de la propriété 'innerHeight' de la fenêtre en JavaScript.