"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 !