POSITION D'UN éLéMENT

illus

script : getPos v1.0
langage : javascript
catégorie : fragment
usage : Connaître la position d'un élément HTML dans la page.
tags : crossbrowser snippet - prise de mesures

Concept

Pour améliorer une interface grâce à du javascript, il est souvent nécessaire de relever la position d'un élément dans la page. Ce fragment de code est là pour ça.

Démo

A l'intérieur du carré jaune ci-dessous, vous pourrez lire, pour chacun de ses côté, la distance qui le sépare du bord du document.
Cliquez ici pour déplacer le carré.

Les mesures sont données en pixels.
Les mesures pour le dessus et le dessous du carré sont données par rapport au bord supérieur de la page.
Les mesures pour les côtés gauche et droit sont relative au bord gauche de la page.

Code

Vous pouvez copier le code ci-dessus, ou télécharger le fichier getPos.js. 

var getPos = function (elem) {
    var pos={'r':0,'l':0,'t':0,'b':0};
    var tmp=elem;
 
    do {
        pos.l += tmp.offsetLeft;
        tmp = tmp.offsetParent;
    } while( tmp !== null );
    pos.r = pos.l + elem.offsetWidth;
 
    tmp=elem;
    do {
        pos.t += tmp.offsetTop;
        tmp = tmp.offsetParent;
    } while( tmp !== null );
    pos.b = pos.t + elem.offsetHeight;
 
    return pos;
};

Le paramètre elem doit désigner un élément html.

La fonction retourne un tableau associatif, avec les clés suivantes :
    t : la mesure pour le côté supérieur de l'élément
    b : la mesure pour le côté inférieur de l'élément
    l : la mesure pour le côté gauche de l'élément
    r : la mesure pour le côté droit de l'élément

Ainsi, nous aurons par exemple :

var mon_elem = document.getElementById('machin');
var cote_droit = getPos(mon_elem).r;

Commentaires

  • Publier un nouveau commentaire
  • gravatar
    hb  le 26 décembre 2010, à 14h34
    Je suppose que ça ne marche pas sur les éléments positionnés en absolu ou contenu dans un tableau puisque dans ces conditions, l'offsetLeft ne réagit plus de la même manière. Je m'explique: en absolu, l'offsetLeft dépend du mode d'affichage du parent de l'élément positionné lui même en absolu ou relative et non pas du parent direct. Les cellules d'un tableau sont aussi embigus sur le positionnement celon les navigateurs.
  • gravatar
    Abrab  le 26 décembre 2010, à 17h06
    Eh bien si, ça marche (pour tout type d'élément, de positionnement, ou de navigateur). Le principe de cette fonction est justement de régler les problèmes que tu soulèves, et de fournir une valeur fiable quelque soit le contexte.
  • gravatar
    hb  le 26 décembre 2010, à 18h15
    Supposons une image(img) positionnée en absolu(y=2px) imbriguée dans 2 paragraphes(p) . L'image se trouvera à 2px sur la page malgré le décalage qui devait être fait normalement avec les paragraphes. La fonction getPos(img) retournera pos.t = 2px + p2.offsetTop + p1.offsetTop; Ce qui est bien plus grand que 5px !!!
  • gravatar
    hb  le 26 décembre 2010, à 18h16
    ...Bien plus grand que 2px pardon...
  • gravatar
    Abrab  le 27 décembre 2010, à 12h26
    Navré d'insister HB, mais je crois que tu confonds le parent d'un élément (parentNode) et son parent offset (offsetParent).

    Dans l'exemple que tu suggères, le parent offset de l'image n'est pas p2 mais body. Si p2 avait une position absolue, alors oui, il serait le parent offset de l'image. Mais cela ne poserait pas de problème car getPos remonte d'offsetParent en offsetParent (et pas de parentNode en parentNode comme tu sembles croire), afin de toujours donner une position relative au coin supérieur-gauche de la page.

    Je te renvoie ici et là pour plus de précisions sur l'offsetParent.
  • gravatar
    hb  le 27 décembre 2010, à 22h41
    Je vois ! J'ai tiré des conclusions hâtives en repensant au code que j'essayais de réaliser il y a longtemps. Désolé pour mon manque de rigueur et merci pour les précisions !!!
  • gravatar
    Souf  le 17 mai 2011, à 16h10
    SVP c'est quoi l'équivalent de la position classique (x,y) ?? (l,t) peu-etre ??
  • gravatar
    Camuke  le 06 juillet 2011, à 16h56
    A mon avis:
    'r': right; droite
    'l': left: gauche
    't':top: haut
    'b':bottom: bas
  • gravatar
    cloutclout  le 22 septembre 2011, à 23h23
    ca ne marche pas... je pense que Abrab a raison je travail le style liquide en relatif pour la page et absolue pour les anims et là ça ce complique
  • gravatar
    rachid  le 15 avril 2012, à 15h07
    merci bcp ca marche de mon coté :D
  • Navré, le formulaire de commentaires est temporairement indisponible.