Parfois, dans le projet, vous utilisez JS pour obtenir des positions d'élément pour localiser les éléments. Tout d'abord, utilisez l'image pour expliquer la relation entre ScrollWidth, ClientWidth et OffsetWidth.
Une brève introduction à JS obtenant diverses largeurs et hauteurs :
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
Ce qui précède se réfère principalement à IE, et les différences dans 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
Offsetwidth (largeur + padding + bordure)
Supposons que OBJ soit un contrôle HTML.
OBJ.OffsetTop fait référence à la position, en entier, un pixel unitaire d'OBJ à la commande supérieure ou supérieure.
OBJ.Offsetleft fait référence à la position, en entier, un pixel unitaire d'OBJ vers le contrôle gauche ou supérieur.
OBJ.OffsetWidth fait référence à la largeur, en entier et aux pixels unitaires du contrôle OBJ lui-même. Obtient la largeur du contenu visible de l'objet, à l'exclusion des barres de défilement et des frontières;
Obj.offsetheight fait référence à la hauteur, en entier, pixel unitaire du contrôle OBJ lui-même.
La différence entre la largeur de décalage et le style.Width
1. OFFSETTOP renvoie un nombre, tandis que Style.Top renvoie une chaîne, qui contient également l'unité: PX en plus du numéro.
2. OFFSETTOP est en lecture seule, tandis que Style.Top est en lecture-écriture.
3. Si aucun style supérieur n'est spécifié pour les éléments HTML, alors style.top renvoie une chaîne vide.