Metoden getBoundingClientRect

Metoden getBoundingClientRect indeholder et objekt med elementets koordinater. Koordinaterne beregnes i forhold til den synlige del af siden uden at tage højde for scroll (i forhold til vinduet). Det vil sige som med egenskaben position med værdien fixed.

I det returnerede objekt indgår egenskaberne: left, top, right, bottom, width, height. Det er værd at bemærke, at disse egenskaber ikke har noget at gøre med CSS-egenskaber. De indeholder afstande til elementets respektive sider. For left/right - fra den venstre grænse af sidens synlige område, og for top/bottom - fra den øverste.

Syntaks

javascriptelement.getBoundingClientRect();

Eksempel

Lad os få elementets koordinater:

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å