Metoden getBoundingClientRect

Metoden getBoundingClientRect inneholder et objekt med koordinater til et element. Koordinater beregnes i forhold til den synlige delen av siden uten tanking på scrolling (i forhold til vinduet). Det vil si som med egenskapen position med verdien fixed.

I det returnerte objektet finnes egenskapene: left, top, right, bottom, width, height. Det er verdt å merke seg at disse egenskapene ikke har noe å gjøre med CSS-egenskaper. De inneholder avstander til elementets tilsvarende sider. For left/right - fra venstre kant av den synlige området på siden, og for top/bottom - fra toppen.

Syntaks

javascriptelement.getBoundingClientRect();

Eksempel

La oss hente koordinatene til et element:

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

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

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

Se også