Méthode getBoundingClientRect

La méthode getBoundingClientRect contient un objet de coordonnées de l'élément. Les coordonnées sont calculées par rapport à la partie visible de la page sans tenir compte du défilement (par rapport à la fenêtre). C'est-à-dire comme avec la propriété position avec la valeur fixed.

L'objet retourné contient les propriétés : left, top, right, bottom, width, height. Il est important de noter que ces propriétés n'ont rien à voir avec les propriétés CSS. Elles contiennent les distances jusqu'aux côtés correspondants de l'élément. Pour left/right - depuis la bordure gauche de la zone visible de la page, et pour top/bottom - depuis la bordure supérieure.

Syntaxe

javascriptélément.getBoundingClientRect();

Exemple

Obtenons les coordonnées de l'élément :

html<div id="elem"></div>

css#elem {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

javascriptlet elem = document.querySelector('#elem');
console.log(elem.getBoundingClientRect());

Voir aussi