begin process at 2010 03 20 01:37:21
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

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

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

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

jeudi 7 décembre 2006 à 20:35:45 | Comment récupérer le style d'un élément ?

eplanet
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 = "<img id='barre' src='/images/barre.jpg'  />";
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
jeudi 7 décembre 2006 à 20:54:26 | Re : Comment récupérer le style d'un élément ?

eplanet
Réponse acceptée !
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
jeudi 7 décembre 2006 à 21:48:05 | Re : Comment récupérer le style d'un élément ?

PetoleTeam

Membre Club

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)
jeudi 7 décembre 2006 à 22:44:37 | Re : Comment récupérer le style d'un élément ?

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

Vince
jeudi 7 décembre 2006 à 22:51:55 | Re : Comment récupérer le style d'un élément ?

eplanet
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
jeudi 7 décembre 2006 à 23:41:08 | Re : Comment récupérer le style d'un élément ?

eplanet
Réponse acceptée !
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
vendredi 8 décembre 2006 à 06:48:19 | Re : Comment récupérer le style d'un élément ?

PetoleTeam

Membre Club


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 = "<img id='barre' src='p_petole.gif'>";
  var barre = document.getElementById("barre");
  var x = leftElement( barre);
  document.getElementById("info").innerHTML ="PosX = " +x;
  x = ObjGetPosX( 'barre');
  document.getElementById("info").innerHTML +="<br>PosX = " +x;
}
 </script>
</head>
 <body>
<a href="javascript:Go()">Go</a>
<div id="info"></div>
<center><div id="zone"></div></center>
</body>
</html>
;0)

vendredi 8 décembre 2006 à 13:48:29 | Re : Comment récupérer le style d'un élément ?

vincemail
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 = "<img id='barre' src='p_petole.gif' width='600px'>";
  var barre = document.getElementById("barre");
  var x = leftElement( barre);
  document.getElementById("info").innerHTML ="PosX = " +x;
  x = ObjGetPosX( 'barre');
  document.getElementById("info").innerHTML +="<br>PosX = " +x;
}
</script>
</head>
<body><center>
<a href="javascript:Go()">Go</a>
<div id="info"></div>
<div id="zone2" style="width:900px; margin:auto;"> <!-- div parent ajouté ici -->
<div id="zone"></div>
</div>
</center>
</body>
</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
dimanche 10 décembre 2006 à 16:46:34 | Re : Comment récupérer le style d'un élément ?

PetoleTeam

Membre Club
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)


Cette discussion est classée dans : style, image, barre, var, document

Répondre à ce message

Sujets en rapport avec ce message

Image-blinkeur... [ par Grand Mamamouchi ] Bonjour !je voudrais ecrire un image-blinkeur.Voici le chantier :<script ty Positionnement par rapport à l'écran [ par Tiish ] Bonjour,Plutôt débutant, je tente désespérément de corriger le script suivant pour que l'image qui apparait se mette pile poil au centre de la page en recuperation coordonnees image pour base de données [ par elodielole ] Slt à tous j'ai donc un gros pbe ça fait plusieurs jour que je bosse dessus, en fait j'aimerais pouvoir recuperer les coordonnées dans ma table d'une pb affichage image [ par genebaud ] salutje pense avoir une erreurde syntaxe mais je ne vois pas .je crée un lien auquel est attaché soit un texte soit une image.je recupere bien mes var Dimension d'un div de façon dynamique [ par hawks_ttf ] Bonjour tout le mondeJe cherche le moyen d'avoir dynamiquement les dimensions d'un div...J'ai essayé document.getElementbyID(IDdiv).offsetWidth et .of probleme avec une fonction javascript + css [ par edelendil ] Voila, je dois créer un menu déroulant composé de deux tableaux le premier contient le titre de la rubrique et reste toujours visible le deuxieme con Probleme affichage infobulle calendrier avec IE mais pas avec firefox [ par ishanshade ] Bonjour à tousJe fais un site internet pour la FAC sur un sujet bien précis : les mangasPour ce site,j'ai voulu incorporer un calendrier avec infobull Probleme de positionnement de mon menu [ par skippy729 ] Bonjour, je voudrais utiliser ce script afin d'inserer un menu sur mon site, seulement lorsque je teste ce script, le menu se retrouve en haut a gauch 2 menuS deroulants java dans une page [ par DEVLYNE ] Bonjour!Sachez que je suis uns très grande débutante mais j'ai un petit souci.J'utilise un logiciel gratuit: Coffee Cup DHTML menu pour faire mes menu Message à l'envoi d'un formulaire, oui mais avec un GIF ? [ par porciner ] Bonjour à tous,J'ai fais une petite fonction qui permet d'afficher un message d'attente lorsque l'utilisateur envoie un formulaire.function uploadProg


Nos sponsors


Sondage...

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

Photo ciel d'oragePhoto Village du Lot et Garonne, Saint Front
Photo arbre et feuilles rousses 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,359 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)