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

element.getBoundingClientRect();

Eksempel

La oss hente koordinatene til et element:

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

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

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

Se også

egenskapen offsetParent,
som inneholder forelderen med posisjonering
egenskapen offsetTop,
som inneholder elementets offset fra toppen
egenskapen offsetLeft,
som inneholder elementets offset fra venstre
metoden elementFromPoint,
som returnerer elementet ved koordinater