A getBoundingClientRect metódus

A getBoundingClientRect metódus egy objektumot tartalmaz az elem koordinátáival. A koordinátákat a lap látható része alapján számítják ki, a görgetés figyelembevétele nélkül (az ablakhoz képest). Vagyis úgy, mint a position tulajdonság fixed értékénél.

A visszaadott objektum a következő tulajdonságokat tartalmazza: left, top, right, bottom, width, height. Érdemes megjegyezni, hogy ezek a tulajdonságok semmi köze a CSS tulajdonságokhoz. Ezek az elem megfelelő oldalaitól való távolságot tartalmazzák. A left/right - a lap látható területének bal szélétől, a top/bottom pedig a felső szélétől mérik.

Szintaxis

elem.getBoundingClientRect();

Példa

Kapjuk meg egy elem koordinátáit:

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

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

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

Lásd még

a offsetParent tulajdonság,
amely a pozicionálással rendelkező szülőt tartalmazza
a offsetTop tulajdonság,
amely az elem felülről való eltolását tartalmazza
a offsetLeft tulajdonság,
amely az elem balról való eltolását tartalmazza
a elementFromPoint metódus,
amely a koordináták alapján visszaadja az elemet