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

javascriptelemento.getBoundingClientRect();

Exemplo

Vamos obter as coordenadas do elemento:

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

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

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

Veja também