Metoda getBoundingClientRect

Metoda getBoundingClientRect conține un obiect cu coordonatele elementului. Coordonatele sunt calculate relativ la partea vizibilă a paginii fără a ține cont de scroll (relativ la fereastră). Adică ca și în cazul proprietății position cu valoarea fixed.

În obiectul returnat sunt conținute proprietățile: left, top, right, bottom, width, height. Merită menționat că aceste proprietăți nu au nimic în comun cu proprietățile CSS. În ele sunt conținute distanțele până la laturile corespunzătoare ale elementului. Pentru left/right - de la marginea stângă a zonei vizibile a paginii, iar pentru top/bottom - de la marginea de sus.

Sintaxă

element.getBoundingClientRect();

Exemplu

Să obținem coordonatele elementului:

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

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

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

Veți și

proprietatea offsetParent,
care conține părintele cu poziționarea
proprietatea offsetTop,
care conține decalajul elementului de sus
proprietatea offsetLeft,
care conține decalajul elementului din stânga
metoda elementFromPoint,
care returnează elementul după coordonate