Método getBoundingClientRect

El método getBoundingClientRect contiene un objeto con las coordenadas del elemento. Las coordenadas se calculan relativo a la parte visible de la página sin tener en cuenta el desplazamiento (relativo a la ventana). Es decir, como con la propiedad position con el valor fixed.

El objeto devuelto contiene las propiedades: left, top, right, bottom, width, height. Vale la pena señalar que estas propiedades no tienen nada que ver con las propiedades CSS. Contienen distancias a los lados correspondientes del elemento. Para left/right - desde el borde izquierdo del área visible de la página, y para top/bottom - desde el superior.

Sintaxis

javascriptelemento.getBoundingClientRect();

Ejemplo

Obtengamos las coordenadas del 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());

Véase también