Coordonnées

Pour déplacer des éléments, nous devons être familiers avec les coordonnées.

La plupart des méthodes JavaScript traitent de l’un des deux systèmes de coordonnées :

1. Par rapport à la fenêtre – similaire à position:fixed, calculé à partir du bord supérieur/gauche de la fenêtre.
   • nous désignerons ces coordonnées comme clientX/clientY, le raisonnement pour un tel nom deviendra clair plus tard, lorsque nous étudierons les propriétés de l’événement.
2. Par rapport au document – similaire à position:absolue à la racine du document, calculé à partir du bord supérieur/gauche du document.
   • nous les dénotons pageX/pageY.

Lorsque la page défile jusqu’au tout début, de sorte que le coin supérieur/gauche de la fenêtre soit exactement le coin supérieur/gauche du document, ces coordonnées sont égales. Mais après le déplacement du document, les coordonnées relatives à la fenêtre des éléments changent, à mesure que les éléments se déplacent à travers la fenêtre, tandis que les coordonnées relatives au document restent les mêmes.

Sur cette image, nous prenons un point dans le document et démontrons ses coordonnées avant le défilement (à gauche) et après (à droite) :

Lorsque le document défile :

• pageY – La coordonnée relative au document est restée la même, elle est comptée à partir du haut du document (maintenant défilée).
• clientY – la coordonnée relative à la fenêtre a changé (la flèche est devenue plus courte), car le même point s’est rapproché du haut de la fenêtre.

Coordonnées des éléments : getBoundingClientRect

La méthode elem.getBoundingClientRect() renvoie les coordonnées de la fenêtre pour un rectangle minimal qui entoure elem en tant qu’objet de la classe intégrée DOMRect.

Propriétés principales de DOMRect :

• x/y – Coordonnées X/Y de l’origine du rectangle par rapport à la fenêtre,
• width/height – largeur/hauteur du rectangle (peut être négatif).

De plus, il existe des propriétés dérivées :

• top/bottom – Coordonnée Y pour le bord supérieur/inférieur du rectangle,
• left/right – Coordonnée X pour le bord du rectangle gauche/droit.

Par exemple, cliquez sur ce bouton pour voir les coordonnées de sa fenêtre :

Si vous faites défiler la page et répétez, vous remarquerez que lorsque la position du bouton relatif à la fenêtre change, ses coordonnées de fenêtre (y/top/bottom si vous faites défiler verticalement) changent également.

Voici l’image de la sortie de elem.getBoundingClientRect() :

Comme vous pouvez le voir, x/y et width/height décrivent entièrement le rectangle. Les propriétés dérivées peuvent être facilement calculées à partir d’eux :

• left = x
• top = y
• right = x + width
• bottom = y + height

Veuillez noter :

• Les coordonnées peuvent être des fractions décimales, telles que 10.5. C’est normal, le navigateur utilise en interne des fractions dans les calculs. Nous n’avons pas à les arrondir lors de la définition de style.left/top.
• Les coordonnées peuvent être négatives. Par exemple, si la page défile de sorte que elem se trouve maintenant au-dessus de la fenêtre, alors elem.getBoundingClientRect().top est négatif.