Javascript obtient et détermine la hauteur, la largeur, etc. de la fenêtre du navigateur, de l'écran, de la page Web, etc. Compétences _javascript

Attributs de positionnement précis HTML : scrollLeft, scrollWidth, clientWidth, offsetWidth

scrollHeight : Obtenez la hauteur de défilement de l'objet.
scrollLeft : Définit ou obtient la distance entre le bord gauche de l'objet et l'extrémité la plus à gauche du contenu actuellement visible dans la fenêtre
scrollTop : Définit ou obtient la distance entre le bord le plus haut de l'objet et l'extrémité la plus haute du contenu visible dans la fenêtre
scrollWidth : Récupère la largeur de défilement de l'objet
offsetHeight : Récupère la hauteur de l'objet par rapport à la mise en page ou à la coordonnée parent spécifiée par la propriété offsetParent
offsetLeft : Récupère le hauteur de l'objet par rapport à la mise en page ou à la coordonnée parent spécifiée par la propriété offsetParent Calculer la position gauche
offsetTop : Obtenez la position supérieure calculée de l'objet par rapport à la mise en page ou à la coordonnée parent spécifiée par l'attribut offsetTop
event.clientX La coordonnée horizontale par rapport au document
event.clientY La coordonnée verticale par rapport au document
event.offsetX est la coordonnée horizontale par rapport au conteneur
event.offsetY est la coordonnée verticale par rapport au conteneur
document.documentElement.scrollTop est la valeur du défilement vertical
event.clientX document.documentElement.scrollTop est relatif à la position horizontale du document La quantité de défilement des coordonnées dans la direction verticale
Les différences entre IE et FireFox sont les suivants :
IE6.0, FF1.06 :

Copier le code Le code est le suivant :

clientWidth = width padding
clientHeight = height padding
offsetWidth = width padding border
offsetHeight = hauteur padding border
IE5.0/5.5 :
clientWidth = width – border
clientHeight = hauteur – border
offsetWidth = width
offsetHeight = hauteur

Astuce : L'attribut margin en CSS n'a rien à voir avec clientWidth, offsetWidth, clientHeight et offsetHeight

La largeur de la zone visible de la page Web : document.body.clientWidth
La hauteur de la zone visible de la page Web : document. body.clientHeight
La largeur de la zone visible de la page Web : document.body.offsetWidth (y compris la largeur des lignes latérales )
La hauteur de la zone visible de la page web : document.body.offsetHeight (y compris la hauteur des lignes latérales)
La largeur du texte intégral de la page web : document .body.scrollWidth
La hauteur du texte intégral de la page Web : document.body.scrollHeight
La hauteur de la page Web en cours de défilement : document.body.scrollTop
Le côté gauche de la page Web en cours de défilement : document .body.scrollLeft
La partie principale de la page web : window.screenTop
La partie gauche de la partie principale de la page web : window.screenLeft
La hauteur de la résolution de l'écran : window.screen. height
La largeur de la résolution de l'écran : window.screen.width
Hauteur de la zone de travail disponible à l'écran : window.screen.availHeight
Largeur de la zone de travail disponible à l'écran : window.screen.availWidth

Points techniques

Le code de cette section utilise principalement certaines propriétés de l'objet Document concernant la fenêtre. Les principales fonctions et utilisations de ces propriétés sont les suivantes.
Pour obtenir la taille de la fenêtre, différentes propriétés et méthodes doivent être utilisées pour différents navigateurs : pour détecter la taille réelle de la fenêtre, vous devez utiliser les propriétés de la fenêtre sous Netscape sous IE ; au plus profond du document pour effectuer la détection du corps ; dans l'environnement DOM, si vous souhaitez obtenir la taille de la fenêtre, vous devez faire attention à la taille de l'élément racine, pas à l'élément.
La propriété innerWidth de l'objet Window contient la largeur intérieure de la fenêtre actuelle. La propriété innerHeight de l'objet Window contient la hauteur intérieure de la fenêtre actuelle.
L'attribut body de l'objet Document correspond à la balise du document HTML. La propriété documentElement de l'objet Document représente le nœud racine du document HTML.
document.body.clientHeight représente la hauteur actuelle de la fenêtre où se trouve le document HTML. document.body.clientWidth représente la largeur actuelle de la fenêtre où se trouve le document HTML.

Exemple de code

Copier le code Le code est le suivant :

🎜 >                                                                                                                      >                                                           La taille réelle de la fenêtre du navigateur-->
La hauteur réelle de la fenêtre du navigateur :

Largeur réelle de la fenêtre du navigateur :
>                                                                                                                                                                                         () //Fonction : obtenir la taille
                                                                                                                                                                                                                                                                                               depuis cument.body.clientWidth)) winWidth = document .body.clientWidth;
​winHeight= document.body.clientHeight;
//Détectez le corps en approfondissant le document et obtenez la taille de la fenêtre
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//Les résultats sont affichés dans deux zones de texte
document.form1.availHeight.value = winHeight;
document .form1.availWidth.value = winWidth;
                              
                     findDimensions();





Interprétation du programme source

(1) Le programme crée d'abord un formulaire contenant deux zones de texte pour afficher la largeur et la hauteur actuelles de la fenêtre, et leurs valeurs changeront à mesure que la taille de la fenêtre change. (2) Dans le code JavaScript suivant, deux variables winWidth et winHeight sont d'abord définies pour enregistrer les valeurs de hauteur et de largeur de la fenêtre. (3) Ensuite, dans la fonction findDimensions (), utilisez window.innerHeight et window.innerWidth pour obtenir la hauteur et la largeur de la fenêtre, et enregistrez-les dans les deux variables susmentionnées.

(4) Détectez ensuite le corps en pénétrant profondément dans le document, obtenez la taille de la fenêtre et stockez-la dans les deux variables mentionnées ci-dessus.

(5) À la fin de la fonction, en accédant aux éléments du formulaire par leur nom, les résultats sont affichés dans deux zones de texte.
(6) A la fin du code JavaScript, terminez toute l'opération en appelant la fonction findDimensions().