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

élément.getBoundingClientRect();

Exemple

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

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

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

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

Voir aussi

la propriété offsetParent,
qui contient le parent avec positionnement
la propriété offsetTop,
qui contient le décalage de l'élément depuis le haut
la propriété offsetLeft,
qui contient le décalage de l'élément depuis la gauche
la méthode elementFromPoint,
qui retourne l'élément par coordonnées