Metoda getBoundingClientRect

Metoda getBoundingClientRect obsahuje objekt souřadnic elementu. Souřadnice se počítají vzhledem k viditelné části stránky bez zohlednění posuvníku (vzhledem k oknu). To znamená jako u vlastnosti position s hodnotou fixed.

V vráceném objektu jsou obsaženy vlastnosti: left, top, right, bottom, width, height. Stojí za zmínku, že tyto vlastnosti nemají nic společného s CSS vlastnostmi. Obsahují vzdálenosti k příslušným stranám elementu. Pro left/right - od levého okraje viditelné oblasti stránky, a pro top/bottom - od horního.

Syntaxe

javascriptelement.getBoundingClientRect();

Příklad

Získáme souřadnice elementu:

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

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

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

Viz také