Método getBoundingClientRect

O método getBoundingClientRect contém um objeto com coordenadas do elemento. As coordenadas são calculadas em relação à parte visível da página sem considerar a rolagem (em relação à janela). Ou seja, como na propriedade position com o valor fixed.

No objeto retornado estão contidas as propriedades: left, top, right, bottom, width, height. Vale notar que essas propriedades não têm nada a ver com propriedades CSS. Elas contêm as distâncias até os lados correspondentes do elemento. Para left/right - da borda esquerda da área visível da página, e para top/bottom - da borda superior.

Sintaxe

elemento.getBoundingClientRect();

Exemplo

Vamos obter as coordenadas do elemento:

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

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

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

Veja também

a propriedade offsetParent,
que contém o pai com posicionamento
a propriedade offsetTop,
que contém o deslocamento do elemento a partir do topo
a propriedade offsetLeft,
que contém o deslocamento do elemento a partir da esquerda
o método elementFromPoint,
que retorna o elemento pelas coordenadas