¿Cómo obtener la posición de un elemento HTML?

Mateo G. -

Problema: Localizar elementos HTML

Encontrar la posición de un elemento HTML en una página web puede ser complicado. A menudo necesitas esta información para cambios de diseño, animaciones o funciones interactivas.

Uso de JavaScript para obtener la posición de un elemento

El método getBoundingClientRect()

El método getBoundingClientRect() es una función de JavaScript que proporciona la posición y el tamaño de un elemento HTML en relación con la ventana gráfica. Este método devuelve un objeto con propiedades como top, right, bottom y left, que muestran las coordenadas del elemento.

Para usar getBoundingClientRect() para obtener la posición:

  1. Selecciona el elemento objetivo usando JavaScript.
  2. Llama al método getBoundingClientRect() en el elemento.
  3. Accede a las propiedades del objeto devuelto para obtener las coordenadas.

Ejemplo: Ten en cuenta las transformaciones del elemento

Al usar getBoundingClientRect(), recuerda que las transformaciones CSS pueden afectar los valores devueltos. Si un elemento ha sido escalado, rotado o trasladado, el método devolverá las coordenadas transformadas, que pueden diferir de la posición original del elemento en el flujo del documento.

Cómo obtener la posición de un elemento

  1. Selecciona el elemento HTML objetivo: Usa JavaScript para seleccionar el elemento que deseas ubicar. Por ejemplo:

    var element = document.getElementById('myElement');

  2. Aplica getBoundingClientRect(): Llama al método getBoundingClientRect() en el elemento seleccionado:

    var rect = element.getBoundingClientRect();

  3. Obtén los valores de top, right, bottom y left: Accede a las propiedades del objeto devuelto para obtener la posición del elemento:

    console.log(rect.top, rect.right, rect.bottom, rect.left);

Estos valores muestran la posición del elemento en relación con la ventana gráfica. Si necesitas la posición relativa a otro elemento, resta un rectángulo del otro:

var bodyRect = document.body.getBoundingClientRect();
var elemRect = element.getBoundingClientRect();
var offset = elemRect.top - bodyRect.top;

Este cálculo te da la distancia vertical del elemento desde el elemento <body>.

Consejo: Obtención de las coordenadas del centro del elemento

var element = document.getElementById('myElement');
var rect = element.getBoundingClientRect();
var centerX = rect.left + rect.width / 2;
var centerY = rect.top + rect.height / 2;
console.log('Coordenadas del centro:', centerX, centerY);