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

Signaler
Messages postés
112
Date d'inscription
dimanche 6 juin 2004
Statut
Membre
Dernière intervention
19 septembre 2007
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
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

8 réponses

Messages postés
112
Date d'inscription
dimanche 6 juin 2004
Statut
Membre
Dernière intervention
19 septembre 2007

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
Messages postés
112
Date d'inscription
dimanche 6 juin 2004
Statut
Membre
Dernière intervention
19 septembre 2007

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
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
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)
Messages postés
112
Date d'inscription
dimanche 6 juin 2004
Statut
Membre
Dernière intervention
19 septembre 2007

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

Vince
Messages postés
112
Date d'inscription
dimanche 6 juin 2004
Statut
Membre
Dernière intervention
19 septembre 2007

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
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
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...

<html>
<head>
<script type="text/javascript">
function leftElement(e){
    return ((e && leftElement != leftElement.caller)?e.offsetLeft:0) + ((e && e.offsetParent)?e.offsetParent.offsetLeft + leftElement(e.offsetParent):0);
}
//------------------------
function ObjGetPosX( div_){
  var Obj = document.getElementById( div_);
  if( Obj) return( Obj.offsetLeft);
  return( null);
}
//-----------
function Go(){
  var zone = document.getElementById("zone");
  zone.innerHTML = "";
  var barre = document.getElementById("barre");
  var x = leftElement( barre);
  document.getElementById("info").innerHTML ="PosX = " +x;
  x = ObjGetPosX( 'barre');
  document.getElementById("info").innerHTML +="
PosX = " +x;
}

</script>
</head>



[javascript:Go() Go]

<center>

</center>

</html>




;0)
Messages postés
79
Date d'inscription
mardi 29 juillet 2003
Statut
Membre
Dernière intervention
8 décembre 2006

    Effectivement, ton code donne les même résultats, mais pas le suivant : (sous IE seulement évidemment...)

<html>
<head>
<script type="text/javascript">
function leftElement(e){
    return ((e && leftElement != leftElement.caller)?e.offsetLeft:0) + ((e && e.offsetParent)?e.offsetParent.offsetLeft + leftElement(e.offsetParent):0);
}
//------------------------
function ObjGetPosX( div_){
  var Obj = document.getElementById( div_);
  if( Obj) return( Obj.offsetLeft);
  return( null);
}
//-----------
function Go(){
  var zone = document.getElementById("zone");
  zone.innerHTML = "";
  var barre = document.getElementById("barre");
  var x = leftElement( barre);
  document.getElementById("info").innerHTML ="PosX = " +x;
  x = ObjGetPosX( 'barre');
  document.getElementById("info").innerHTML +="
PosX = " +x;
}
</script>
</head>
<center>
[javascript:Go() Go]

<!-- div parent ajouté ici -->

</center>

</html>

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
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
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)