Comment récupérer le style d'un élément ?Résolu

Question

Bonjour à tous, 
J'essaie d'écrire script qui insère une image dans le document HTML et qui récupère ensuite sa position absolue.
Voici mon script (simplifié) :

var zone = document.getElementById("zone");
zone.innerHTML = "";
var barre = document.getElementById("barre");
var x = barre.style.left;

Lorsque je tente d'afficher x, rien ne s'affiche à l'écran. Apparemment, barre.style.left n'est défini que lorsque je rajoute un "style='position:absolute; left:10px;'" dans la balise de l'image. Mais étant donné qu'à priori je ne sais pas où sera placée l'image, cette solution ne me convient pas...
Est-ce que quelqu'un a une solution ? (qui marche sur Firefox et IE si possible)
Merci d'avance

Vince

eplanet · Accepted Answer

Je viens de trouver une très bonne solution proposée par GhislainLavoie, c'est une fonction récursive qui renvoie la position absolue :

function leftElement(e){
    return ((e && leftElement != leftElement.caller)?e.offsetLeft:0) + ((e && e.offsetParent)?e.offsetParent.offsetLeft + leftElement(e.offsetParent):0);
}

Seulement cette fonction semble marcher de facon incorrecte sur IE (pas de problème sur Firefox) lorsqu'il y a un ascenseur horizontal. Quelqu'un saurait-il comment remédier à ce problème ?

Vince

PetoleTeam · Answer

B

onjour...
je n'ai jamais eu de problème avec 



//------------------------
function ObjGetPosX( div_){
  var Obj = document.getElementById( div_);
  if( Obj) return( Obj.offsetLeft);
  return( null);
}
//------------------------
function ObjGetPosY( div_){
  var Obj = document.getElementById( div_);
  if( Obj) return( Obj.offsetTop);
  return( null);
}




;0)

eplanet · Answer

Sur Firefox ca marche très bien mais pas du tout sur IE...

Vince

eplanet · Answer

En fait je crois que le problème vient du fait que IE et Firefox ne gère pas de la même manière offsetLeft : je centre une image dans ma fenêtre, lorsque je redimensionne cette fenetre (les marges de part et d'autre de l'image varient) et offsetLeft varie en conséquence sur Firefox alors qu'il reste constant sur IE...

Vince

eplanet · Answer

Non finalement la fonction récursive ci-dessus semble bien fonctionner avec IE aussi... j'ai du mal faire le test. Bonne soirée

Vince

PetoleTeam · Answer

B onjour... Il m'interésse d'aller plus loin car en testant avec ce qui est dessous j'obtiens les mêmes valeurs entre les deux fonctions... [javascript:Go() Go] ;0)

vincemail · Answer

Effectivement, ton code donne les même résultats, mais pas le suivant : (sous IE seulement évidemment...) [javascript:Go() Go] J'ai juste ajouté un élément parent au div "zone". Je pense que offsetLeft rend une position relative par rapport à l'élément parent sous IE et non par rapport au body, d'où la necessité de la fonction récursive qui calcule le décalage à gauche pour tous les parents successivement... Vincent

PetoleTeam · Answer

B

onjour...
Dans le cas d'imbrication de div, ou autre, la fonction de GhislainLavoie est bien la plus compatible car elle remonte au body...
A utiiser sans modération dans tous les cas.
;0)

Comment récupérer le style d'un élément ?

8 réponses

Votre réponse

Discussions similaires