js pour obtenir des informations de base sur le navigateur_Connaissances de base

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 bords)
La hauteur de la zone visible de la page web : document.body.offsetHeight (y compris la largeur du bord)
Largeur du texte intégral du corps de la page Web : document.body.scrollWidth
Hauteur du texte intégral du corps de la page Web : document.body.scrollHeight
La page a défilé si haut : document.body.scrollTop
Le côté gauche de la page Web en cours de défilement : document.body.scrollLeft
Sur le corps principal de la page Web : window.screenTop
Le côté gauche du corps principal de la page Web : window.screenLeft
Haute résolution d'écran : window.screen.height
La largeur de la résolution de l'écran : window.screen.width
Hauteur de l'espace de travail disponible à l'écran : window.screen.availHeight
Largeur de l'espace de travail disponible à l'écran : window.screen.availWidth

Positionnement HTML précis : scrollLeft, scrollWidth, clientWidth, offsetWidth
scrollHeight : obtient 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 récupère la distance entre le haut de l'objet et le haut du contenu visible dans la fenêtre
scrollWidth : Obtenez la largeur de défilement de l'objet
offsetHeight : obtient la hauteur de l'objet par rapport à la mise en page ou à la coordonnée parent spécifiée par la propriété offsetParent des coordonnées parent
offsetLeft : obtient la position gauche calculée de l'objet par rapport à la mise en page ou à la coordonnée parent spécifiée par la propriété offsetParent
offsetTop : obtient la position supérieure calculée de l'objet par rapport à la mise en page ou aux coordonnées parent spécifiées par l'attribut offsetTop
Coordonnée horizontale event.clientX par rapport au document
coordonnée verticale event.clientY par rapport au document
coordonnée horizontale event.offsetX par rapport au conteneur
event.offsetY coordonnée verticale par rapport au conteneur
document.documentElement.scrollValeur supérieure du défilement vertical
event.clientX document.documentElement.scrollTop La coordonnée horizontale par rapport au document La quantité de défilement vertical

Les différences entre IE et FireFox sont les suivantes :

IE6.0, FF1.06 :

clientWidth = remplissage de largeur

clientHeight = rembourrage en hauteur

offsetWidth = bordure de remplissage en largeur

offsetHeight = bordure de remplissage en hauteur

IE5.0/5.5：

clientWidth = largeur - bordure

clientHeight = hauteur - bordure

offsetWidth = largeur

offsetHeight = hauteur

(Il faut le mentionner : l'attribut margin en CSS n'a rien à voir avec clientWidth, offsetWidth, clientHeight et offsetHeight)

－－－－－－－－－－－－－－－－－

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.

Une petite recherche pour obtenir la taille de la fenêtre visible de différents navigateurs.

Dans mon test local : il peut être utilisé sous IE, FireFox et Opera

document.body.clientWidth

Document.body.clientHeight peut être obtenu, c'est très simple et pratique.

Et dans les projets d'entreprise : Opera utilise toujours

document.body.clientWidth

document.body.clientHeight

Mais IE et FireFox utilisent

document.documentElement.clientWidth

document.documentElement.clientHeight

Il s'avère que la norme W3C pose problèmehttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Si vous ajoutez cette ligne de balises à la page

Dans IE : document.body.clientWidth ==> largeur de l'objet BODY

document.body.clientHeight ==> Hauteur de l'objet BODY

document.documentElement.clientWidth ==>Largeur de la zone visible

document.documentElement.clientHeight ==> Hauteur de la zone visible

Dans FireFox : document.body.clientWidth ==> largeur de l'objet BODY

document.body.clientHeight ==> Hauteur de l'objet BODY

document.documentElement.clientWidth ==>Largeur de la zone visible

document.documentElement.clientHeight ==> Hauteur de la zone visible ?

Dans Opera : document.body.clientWidth ==>

document.body.clientHeight ==> Hauteur de la zone visible

document.documentElement.clientWidth ==> Largeur de l'objet de page (c'est-à-dire la largeur de l'objet BODY plus la largeur de la marge) document.documentElement.clientHeight ==>gt; Hauteur de l'objet de la page (c'est-à-dire la hauteur de l'objet BODY plus la hauteur de la marge)

Et s'il n'y a pas de standard W3C défini,

Alors IE est : document.documentElement.clientWidth ==>

document.documentElement.clientHeight ==> 0

FireFox est : document.documentElement.clientWidth ==> largeur de l'objet de page (c'est-à-dire la largeur de l'objet BODY plus la largeur de la marge)

document.documentElement.clientHeight ==> Hauteur de l'objet de la page (c'est-à-dire la hauteur de l'objet BODY plus la hauteur de la marge)

Opera est : document.documentElement.clientWidth ==> largeur de l'objet de page (c'est-à-dire la largeur de l'objet BODY plus la largeur de la marge)

document.documentElement.clientHeight ==> Hauteur de l'objet de la page (c'est-à-dire la hauteur de l'objet BODY plus la hauteur de la marge)

C'est vraiment une chose gênante. En fait, du point de vue de la conception et du développement front-end, il serait beaucoup plus pratique d'avoir moins d'objets et de méthodes et de ne pas utiliser les dernières normes. Mais si vous ne pouvez pas suivre la tendance, vous ne serez jamais un designer senior, il faut donc encore comprendre et maîtriser ces connaissances.