Pasar al contenido principal

Obtener la posición de un elemento HTML con JavaScript

Obtener la posición de un elemento HTML con JavaScript

Obtener la posición de un elemento HTML con JavaScript - EDteam blog

Cuando trabajamos en diseño de interfaces puede ser muy útil conocer las coordenadas de un elemento respecto a la ventana (viewport). Si bien jQuery nos facilitaba mucho obtener estos valores, se puede hacer muy fácil también con Vanilla JS (JavaScript puro). Veamos como

element.getBoundingClientRect()

El método getBoundingClientRect() aplicado a un elemento devuelve un objeto ClientRect que contiene las siguientes propiedades de la caja del elemento:


// top:    distancia al borde superior del viewport
// left:   distancia al borde izquierdo del viewport
// right:  distancia al borde derecho del viewport
// bottom: distancia al borde inferior del viewport
// width:  ancho de la caja del elemento
// height: altura de la caja del elemento
 

Debes tener en cuenta que estas distancias se calculan del punto (0,0) del elemento que corresponde a su esquina superior derecha, por lo que podrías caer en el error de pensar que si un elemento está pegado a la derecha del viewport, el valor de right es 0, en este caso más bien right == width. Veamos con un gráfico que lo dejará más claro.

Obtener posicion de un elemento HTML con JavaScript - EDteam blog

Entonces:

let coords = el.getBoundingClientRect();

// distancia al borde superior del viewport
coords.top
// distancia al borde derecho del viewport
coords.right
// distancia al borde inferior del viewport
coords.bottom
// distancia al borde izquierdo del viewport
coords.left

// ancho del elemento                 
coords.width
// alto del elemento
coords.height

// distancia del borde derecho del elemento al borde derecho del viewport
coords.right - coords.width
// distancia del borde inferior del elemento al borde inferior del viewport 
coords.bottom - coords.height 

// distancia del borde superior del elemento al inicio del documento (cuando se ha hecho scroll)
coords.top + scrollY 

Recursos

Especificación: https://www.w3.org/TR/cssom-view-1/#dom-element-getboundingclientrect

Compatibilidad: http://caniuse.com/#search=getboundingclientrect