Pasar al contenido principal

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

Suscríbete a nuestro boletín

Ingresa tu correo electrónico para recibir nuestro boletín semanal