Récupérer la position d'un élément avec JavaScript

"elementPosition" est une fonction JavaScript qui retourne un objet contenant les positions en pixels d’un élément passé en argument de la fonction, relatives à la fenêtre du navigateur et à la zone d’affichage (viewport).

L’objet contient les coordonnées suivantes :

  • "clientX" : position horizontale en pixels de l’élément en fonction de la fenêtre
  • "clientY" : position verticale en pixels de l’élément en fonction de la fenêtre
  • "viewportX" : position horizontale en pixels de l’élément en fonction de la zone d’affichage
  • "viewportY" : position verticale en pixels de l’élément en fonction de la zone d’affichage
function elementPosition (a) {
  var b = a.getBoundingClientRect();
  return {
    clientX: a.offsetLeft,
    clientY: a.offsetTop,
    viewportX: (b.x || b.left),
    viewportY: (b.y || b.top)
  }
}

Voici un exemple de récupération de la position d’un élément lors d’un clic sur celui-ci :

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

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

  var positions = elementPosition(mon_element);

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

});

Cet article vous a-t-il été utile ?

Super :)
Merci d'avoir donné votre avis !

Oups :(
Merci d'avoir donné votre avis qui va nous permettre de nous améliorer !

^