Maison >interface Web >js tutoriel >Code JS pour obtenir des informations sur le navigateur et la largeur et la hauteur de l'écran_javascript
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 (incluant la largeur des bords)
La hauteur de la zone visible de la page web : document.body.offsetHeight (incluant la largeur du bord)
La largeur du texte intégral du corps de la page Web : document.body.scrollWidth
La hauteur du texte intégral du corps de la page Web : document.body.scrollHeight
La hauteur de défilement de la page Web : document.body .scrollTop
Le côté gauche de la page Web en cours de défilement : document.body.scrollLeft
Le haut du corps de la page Web : window.screenTop
Le côté gauche du corps de la page Web : window.screenLeft
Le haute résolution d'écran : window. screen.height
Largeur de résolution d'écran : window.screen.width
Hauteur de la zone de travail disponible de l'écran : window.screen.availHeight
Largeur de la zone de travail disponible de l'écran : window.screen.availWidth
Positionnement exact 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
La différence entre IE et FireFox est la suivante :
IE6.0, FF1.06 :
clientWidth = width padding
clientHeight = height padding
offsetWidth = largeur de bordure de remplissage
offsetHeight = hauteur de bordure de remplissage
IE5.0/5.5 :
clientWidth = largeur - bordure
clientHeight = hauteur - bordure
offsetWidth = width
offsetHeight = height
(Besoin de mentionner : l'attribut margin en CSS est le même que clientWidth, offsetWidth, clientHeight et offsetHeight Non pertinent)
------------------
Points techniques
Le code de cette section utilise principalement l'objet Document À propos de certaines propriétés du. 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 ; approfondissez le document sous IE Détectez le 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.
Code d'implémentation
Copier le code