Metodo getBoundingClientRect

Il metodo getBoundingClientRect restituisce un oggetto con le coordinate dell'elemento. Le coordinate sono calcolate rispetto alla parte visibile della pagina senza considerare lo scorrimento (rispetto alla finestra). Cioè come con la proprietà position impostata sul valore fixed.

L'oggetto restituito contiene le proprietà: left, top, right, bottom, width, height. Vale la pena notare che queste proprietà non hanno nulla a che fare con le proprietà CSS. Contengono le distanze dai lati corrispondenti dell'elemento. Per left/right - dal bordo sinistro dell'area visibile della pagina, e per top/bottom - da quello superiore.

Sintassi

elemento.getBoundingClientRect();

Esempio

Otteniamo le coordinate di un elemento:

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

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

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

Vedi anche

proprietà offsetParent,
che contiene il genitore con posizionamento
proprietà offsetTop,
che contiene l'offset superiore dell'elemento
proprietà offsetLeft,
che contiene l'offset sinistro dell'elemento
metodo elementFromPoint,
che restituisce l'elemento in base alle coordinate