La largeur de zone visible de la page Web: document.body.clientwidth
La hauteur de zone visible de la page Web: document.body.clientheight
La largeur de zone visible de la page Web: document.body.offsetwidth (y compris la largeur de la ligne de bord)
La hauteur de zone visible de la page Web: document.body.offsetheight (y compris la largeur de la ligne de bord)
Largeur du texte complet de la page Web: document.body.scrollwidth
Texte complet de la page Web: document.body.scrollheight
La page Web est déployée à un niveau élevé: document.body.scrolltop
La gauche de la page Web est déployée: document.body.scrollleft
Sur la partie principale de la page Web: Window.Screentop
Gauche du texte principal de la page Web: fenêtre.screenleft
Résolution à haut écran: fenêtre.Screen.Height
Largeur de la résolution d'écran: window.screen.width
Écran disponible sur l'espace de travail Hauteur: Window.Screen.AvailHeight
Écran Disponible Espace de travail Largeur: Window.Screen.AvailWidth
HTML Position précise: Scrollleft, ScrollWidth, ClientWidth, OffsetWidth
ScrollHeight: obtient la hauteur de défilement de l'objet.
Scrollleft: définissez ou obtenez la distance entre la limite gauche de l'objet et l'extrémité la plus à gauche du contenu actuellement visible dans la fenêtre
ScrollTop: définissez ou obtenez 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 disposition ou à la coordonnée parent spécifiée par la propriété OffsetParent coordonnée parentale
Offsetleft: obtient la position gauche calculée de l'objet par rapport à la disposition ou aux coordonnées parentales spécifiées par la propriété offsetparent
Offsettop: obtient la position supérieure calculée de l'objet par rapport à la disposition ou à la coordonnée parent spécifiée par la propriété Offsettop
event.clientx coordonnées horizontales par rapport au document
Event.Clienty Coordonnées verticales par rapport au document
event.offsetx coordonnées horizontales par rapport au conteneur
event.offsety Coordonnées verticales par rapport au conteneur
document.DocumentElement.ScrollTop La valeur du défilement verticalement
event.clientx + document.DocumentElement.ScrollTop par rapport à la coordonnée horizontale du document + la quantité de défilement dans la direction verticale
C'est-à-dire, les différences de Firefox sont les suivantes :
IE6.0, FF1.06 +:
ClientWidth = largeur + rembourrage
ClientHeight = hauteur + rembourrage
OffsetWidth = largeur + rembourrage + bordure
offSetheight = hauteur + rembourrage + bordure
IE5.0 / 5.5 :
ClientWidth = Largeur - Border
ClientHeight = Height - Border
OffsetWidth = Largeur
offsetheight = hauteur
(Il convient de mentionner que l'attribut de marge dans CSS n'a rien à voir avec la largeur de client
－－－－－－－－－－－－－－－－－－－
Faits saillants techniques
Le code de cette section utilise principalement certaines propriétés de l'objet de document sur la fenêtre. Les fonctions principales et l'utilisation 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 vraie taille de la fenêtre, vous devez utiliser les attributs de fenêtre sous netscape; pour détecter le corps dans IE; Pour 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 interne de la fenêtre actuelle. La propriété Innerheight de l'objet Window contient la hauteur interne de la fenêtre actuelle.
L'attribut corporel de l'objet document correspond à la balise du document HTML. La propriété DocumentElement de l'objet de 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ù réside le document HTML.
Un peu de recherche sur l'obtention de la taille des fenêtres visibles dans divers navigateurs.
Dans mon test local: il peut être utilisé sous IE, Firefox et Opera
document.body.clientwidth
document.body.clientheight peut être obtenu, il est très simple et pratique.
Dans le projet de l'entreprise: l'opéra est toujours utilisé
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 cause des problèmes http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd ">
Si vous ajoutez cette ligne à la page
Dans IE: document.body.clientwidth ==> largeur d'objet corporel
document.body.clientheight ==> hauteur de l'objet corporel
document.DocumentElement.ClientWidth ==> Largeur de zone visible
document.DocumentElement.ClientHeight ==> Hauteur de la zone visible
Dans Firefox: document.body.clientwidth ==> largeur d'objet corporel
document.body.clientheight ==> hauteur de l'objet corporel
document.DocumentElement.ClientWidth ==> Largeur de zone visible
document.DocumentElement.ClientHeight ==> Hauteur visible de la zone?
Dans Opera: document.body.clientwidth ==> largeur de zone visible
document.body.clientheight ==> hauteur de zone visible
Document.DocumentElement.ClientWidth ==> Page Largeur d'objet (c'est-à-dire Largeur d'objet corporel plus largeur de marge) Document.DocumentElement.ClientHeight ==> Page Hauteur de l'objet (c'est-à-dire la hauteur de l'objet corporel plus la hauteur de marge)
S'il n'y a pas de norme pour W3C,
Alors c'est-à-dire: document.DocumentElement.ClientWidth ==> 0
document.DocumentElement.ClientHeight ==> 0
Firefox est: document.DocumentElement.ClientWidth ==> Largeur d'objet Page (c'est-à-dire la largeur des objets corporels plus la largeur de marge)
document.DocumentElement.ClientHeight ==> Page Hauteur de l'objet (c'est-à-dire la hauteur de l'objet corporel plus la hauteur de marge)
L'opéra est: document.DocumentElement.ClientWidth ==> Largeur d'objet Page (c'est-à-dire Largeur d'objet corporel plus largeur de marge)
document.DocumentElement.ClientHeight ==> Page Hauteur de l'objet (c'est-à-dire la hauteur de l'objet corporel plus la hauteur de marge)
C'est vraiment un problème. En fait, du point de vue de la conception et du développement frontaux, il est préférable d'avoir moins d'objets et de méthodes que de ne pas utiliser les dernières normes. Mais si vous ne pouvez pas suivre la tendance, vous ne serez jamais un designer senior, nous devons donc toujours comprendre et maîtriser ces connaissances.