Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

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 al blog de EDteam

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