Obtenir la position d'un élément avec JavaScript

La fonction elPosition() permet d'obtenir la position d'un élément dans une page web.

Elle retourne la position en pixels d'un élément HTML, relatives à la fenêtre du navigateur et à la zone d’affichage.

elPosition()

Retourne un objet de propriétés indiquant la position d'un élément dans la page.

Syntaxe

elPosition(element);

Paramètre

element(HTML Node)

Le paramètre element de la fonction elPosition() définit l'élément HTML pour lequel obtenir la position.

Valeur de retour(Object)

La valeur retournée par la fonction elPosition() est un object contenant 4 propriétés indiquant les positions de l'élément relatives au navigateur et à la zone d'affichage ("viewport").

Propriétés

clientX(Number)

La propriété clientX de la valeur de retour de la fonction elPosition() retourne la position horizontale en pixels d'un élément en fonction de la fenêtre.

clientY(Number)

La propriété clientY de la valeur de retour de la fonction elPosition() retourne la position verticale en pixels d'un élément en fonction de la fenêtre.

viewportX(Number)

La propriété viewportX de la valeur de retour de la fonction elPosition() retourne la position horizontale en pixels d'un élément en fonction de la zone d'affichage.

viewportY(Number)

La propriété viewportY de la valeur de retour de la fonction elPosition() retourne la position verticale en pixels d'un élément en fonction de la zone d'affichage.

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

element.addEventListener('click', function () {

  var positions = elPosition(element);

  console.log({
    "Position horizontale dans la fenêtre": positions.clientX, 
    "Position verticale dans la fenêtre":   positions.clientY, 
    "Position horizontale dans la zone d'affichage": positions.viewportX, 
    "Position verticale dans la zone d'affichage":   positions.viewportY
 });

});

function elPosition (a) {
  var b = a.getBoundingClientRect();
  return {
    clientX: a.offsetLeft,
    clientY: a.offsetTop,
    viewportX: (b.x || b.left),
    viewportY: (b.y || b.top)
  }
}