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

element.getBoundingClientRect();

Příklad

Získáme souřadnice elementu:

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

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

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

Viz také

vlastnost offsetParent,
která obsahuje rodiče s pozicováním
vlastnost offsetTop,
která obsahuje odsazení elementu shora
vlastnost offsetLeft,
která obsahuje odsazení elementu zleva
metoda elementFromPoint,
která vrací element podle souřadnic