Obtenir la position d'un élément à l'aide de JavaScript

1. Utilisez la fonction Element.getBoundingClientRect() pour obtenir la position d’un élément en JavaScript
2. Utilisez la propriété offsetTop pour obtenir la position d’un élément en JavaScript

Chaque élément du document HTML est placé à une position donnée. La position ici fait référence aux coordonnées x et y des éléments.

Dans ce tutoriel, nous obtenons la position d’un élément HTML en JavaScript.

Utilisez la fonction Element.getBoundingClientRect() pour obtenir la position d’un élément en JavaScript

La fonction getBoundingClientRect() produit un objet DOMRect contenant des informations sur la taille et la position d’un élément dans la fenêtre.

L’objet DOMRect, lorsqu’il est renvoyé, contient un petit rectangle qui contient tout l’élément, ce qui inclut le rembourrage et la largeur de la bordure.

Les attributs tels que left, top, right, bottom, x, y, width et height sont utilisés pour définir l’emplacement total du rectangle, ainsi que la taille en pixels. Les valeurs obtenues sont relatives au coin supérieur gauche des fenêtres, à l’exception de la largeur et de la hauteur.

Par exemple,

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

Utilisez la propriété offsetTop pour obtenir la position d’un élément en JavaScript

Il renvoie la position supérieure par rapport au sommet de l’élément offsetParent. Nous pouvons créer une fonction qui renverra ces coordonnées.

Par exemple,

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);