Metoden getBoundingClientRect

Metoden getBoundingClientRect innehåller ett objekt med koordinater för ett element. Koordinater beräknas i förhållande till den synliga delen av sidan utan hänsyn till scrollning (i förhållande till fönstret). Det vill säga som med egenskapen position med värdet fixed.

I det returnerade objektet finns egenskaperna: left, top, right, bottom, width, height. Det är värt att notera att dessa egenskaper inte har något gemensamt med CSS-egenskaper. De innehåller avstånd till elementets motsvarande sidor. För left/right - från den vänstra kanten av den synliga området på sidan, och för top/bottom - från den övre.

Syntax

element.getBoundingClientRect();

Exempel

Låt oss få koordinaterna för ett element:

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

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

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

Se även

egenskapen offsetParent,
som innehåller förälder med positionering
egenskapen offsetTop,
som innehåller elementets offset från toppen
egenskapen offsetLeft,
som innehåller elementets offset från vänster
metoden elementFromPoint,
som returnerar element vid koordinater