Obtener la posición de un elemento usando JavaScript

1. Utilice la función Element.getBoundingClientRect() para obtener la posición de un elemento en JavaScript
2. Utilice la propiedad offsetTop para obtener la posición de un elemento en JavaScript

Cada elemento del documento HTML se coloca en una posición determinada. La posición aquí se refiere a las coordenadas x e y de los elementos.

En este tutorial, obtenemos la posición de un elemento HTML en JavaScript.

Utilice la función Element.getBoundingClientRect() para obtener la posición de un elemento en JavaScript

La función getBoundingClientRect() produce un objeto DOMRect que contiene información sobre el tamaño y la posición de un elemento en la ventana gráfica.

El objeto DOMRect, cuando se devuelve, contiene un pequeño rectángulo que tiene todo el elemento, que incluye el relleno y el ancho del borde.

Los atributos como left, top, right, bottom, x, y, width y height se utilizan para definir la ubicación del rectángulo total, también el tamaño en píxeles. Los valores obtenidos son relativos a la esquina superior izquierda de las ventanas gráficas, excepto por el ancho y el alto.

Por ejemplo,

let elem = document.querySelector('div');
let rect = elem.getBoundingClientRect();
console.log('x: ' + rect.x);
console.log('y: ' + rect.y);

Utilice la propiedad offsetTop para obtener la posición de un elemento en JavaScript

Devuelve la posición superior relativa a la parte superior del elemento offsetParent. Podemos crear una función que devuelva estas coordenadas.

Por ejemplo,

function getOffset(el) {
  var _x = 0;
  var _y = 0;
  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    _x += el.offsetLeft - el.scrollLeft;
    _y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }
  return {top: _y, left: _x};
}
var x = getOffset(document.getElementById('div')).left;
var y = getOffset(document.getElementById('div')).top;
console.log('x: ' + x);
console.log('y: ' + y);