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

element.getBoundingClientRect();

Eksempel

Lad os få elementets koordinater:

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

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

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

Se også

egenskaben offsetParent,
som indeholder forælderen med positioning
egenskaben offsetTop,
som indeholder elementets offset fra toppen
egenskaben offsetLeft,
som indeholder elementets offset fra venstre
metoden elementFromPoint,
som returnerer elementet ud fra koordinater