JavaScript obtient le résumé de la page Web, du navigateur, de la hauteur de l'écran et des conseils width_javascript

Je constate souvent que lors de l'écriture de JavaScript, je dois utiliser la hauteur et la largeur de la page Web, du navigateur ou de l'écran pour résoudre le problème du positionnement de la mise en page. Je l'oublie souvent après l'avoir utilisé auparavant, ou je le recherche simplement. Internet, je le résume donc moi-même. Cela facilite également sa réutilisation, ce qui permet d'économiser du temps et des efforts.

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 (largeur avec barre de défilement)
Hauteur du texte intégral du corps de la page Web : document.body.scrollHeight (hauteur avec barre de défilement)
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
La partie gauche du texte 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 obtient 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.scrollTop La valeur 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 :

Copier le code Le code est le suivant :

clientWidth = remplissage de largeur
clientHeight = rembourrage en hauteur
offsetWidth = bordure de remplissage en largeur
offsetHeight = bordure de remplissage en hauteur

IE5.0/5.5 :

Copier le code Le code est le suivant :

clientWidth = largeur - bordure
clientHeight = hauteur - bordure
offsetWidth = largeur
offsetHeight = hauteur

Résumé : Il y a beaucoup de choses sur la hauteur et la largeur. Je ne comprends pas certains détails. Après l'avoir testé moi-même, certaines valeurs sont les mêmes, donc c'est très déroutant. selon la situation.