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ă

javascriptelement.getBoundingClientRect();

Exemplu

Să obținem coordonatele elementului:

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

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

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

Veți și