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

javascriptelement.getBoundingClientRect();

Przykład

Uzyskajmy współrzędne elementu:

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

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

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

Zobacz także