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

javascriptelem.getBoundingClientRect();

Példa

Kapjuk meg egy elem koordinátáit:

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

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

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

Lásd még