Metoda getBoundingClientRect

Metoda getBoundingClientRect zawiera obiekt współrzędnych elementu. Współrzędne są obliczane względem widocznej części strony bez uwzględnienia przewijania (względem okna). To znaczy jak przy właściwości position o wartości fixed.

W zwracanym obiekcie znajdują się właściwości: left, top, right, bottom, width, height. Warto zaznaczyć, że te właściwości nie mają nic wspólnego z właściwościami CSS. Zawierają one odległości do odpowiednich krawędzi elementu. Dla left/right - od lewej krawędzi widocznego obszaru strony, a dla top/bottom - od górnej.

Składnia

element.getBoundingClientRect();

Przykład

Uzyskajmy współrzędne elementu:

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

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

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

Zobacz także

właściwość offsetParent,
która zawiera rodzica z pozycjonowaniem
właściwość offsetTop,
która zawiera przesunięcie elementu od góry
właściwość offsetLeft,
która zawiera przesunięcie elementu od lewej
metoda elementFromPoint,
która zwraca element według współrzędnych