Metóda getBoundingClientRect

Metóda getBoundingClientRect obsahuje objekt súradníc prvku. Súradnice sa vypočítavajú vzhľadom na viditeľnú časť stránky bez zohľadnenia posúvania (vzhľadom na okno). To znamená ako pri vlastnosti position s hodnotou fixed.

V vrátenom objekte sú obsiahnuté vlastnosti: left, top, right, bottom, width, height. Stojí za zmienku, že tieto vlastnosti nemajú nič spoločné s CSS vlastnosťami. Obsahujú vzdialenosti k príslušným stranám prvku. Pre left/right - od ľavej hranice viditeľnej oblasti stránky, a pre top/bottom - od hornej.

Syntax

javascriptprvok.getBoundingClientRect();

Príklad

Získame súradnice prvku:

html<div id="elem"></div>
css#elem {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
javascriptlet elem = document.querySelector('#elem');
console.log(elem.getBoundingClientRect());

Pozri tiež

  • vlastnosť offsetParent,
    ktorá obsahuje rodiča s pozicionovaním
  • vlastnosť offsetTop,
    ktorá obsahuje posunutie prvku zhora
  • vlastnosť offsetLeft,
    ktorá obsahuje posunutie prvku zľava
  • metóda elementFromPoint,
    ktorá vráti prvok podľa súradníc