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
elemento.getBoundingClientRect();
Ejemplo
Obtengamos las coordenadas del elemento:
<div id="elem"></div>
#elem {
width: 100px;
height: 100px;
border: 1px solid black;
}
let elem = document.querySelector('#elem');
console.log(elem.getBoundingClientRect());
Véase también
-
propiedad
offsetParent,
que contiene el padre con posicionamiento -
propiedad
offsetTop,
que contiene el desplazamiento del elemento desde la parte superior -
propiedad
offsetLeft,
que contiene el desplazamiento del elemento desde la izquierda -
método
elementFromPoint,
que devuelve el elemento por coordenadas
