Discussion :

[Espadrilles]

Bonsoir,

J'ai un petit soucis :

je génère des éléments html à l'aide de javascript/DOM (createElement), puis je donne à ces éléments des class CSS à l'aide de la méthode setAttribute avant d'insérer le noeud créé dans la page.

Seulement Internet Explorer (6 et 7) ne prends pas en compte les propriétés CSS que l'élément devrait avoir vis à vis de sa classe (sous firefox ça marche).

Un petit exemple qui illustre le problème :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<style>
.uneClasse {color:red;}
</style>
 
<script type="text/javascript">
 
	function creerSpan()
	{
		newSpan = document.createElement("span");
		newSpan .setAttribute("class","uneClasse");
		newSpan .innerHTML="Test";
		document.getElementById("conteneur").appendChild(newSpan);
	}
 
</script>
 
 
 
<div id="conteneur">
	<span class="uneClasse">Test</span>
</div>
 
<button onclick="javascript:creerSpan();">Hop</button>

ce code devrait en théorie ajouter des textes "Test" en rouge, ce que fait firefox mais pas IE (il crée les éléments mais ils restent noir), ce dernier semble ne pas appliquer de style lorsqu'un élément est rajouté dynamiquement par javascript.

Est-ce quelque chose qui m'échappe ? Un problème d'IE ? Quelqun a t'il déja été confronté à ce problème ?

Merci d'avance de vos lumières parce que là je sèche !

[E.Bzz]

Bonjour,
je crois que pour IE faut faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

newSpan.class="uneClasse";

Mais essaye déjà en enlevant l'espace devant le "." ...

A+

[Bisûnûrs]

IE ne reconnaît pas la méthode :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setAttribute()

Je corrigerais juste un petit truc du code de E.Bzz :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

newSpan.className="uneClasse";

[Espadrilles]

Merci !!

Je cherchais pas du tout le problème à ce niveau là.

D'autant que cette méthode semblait marcher pour d'autres attributs.

Apparement setAttribute est censé marcher avec IE mais souffre de nombreuses lacunes (pour ceux que ça intéresse ce lien propose quelques rustines).

L'équivalent avec setAttribute qui marche sous IE est

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

newSpan.setAttribute("className","uneClasse");

(testé IE7)

cependant celui là ne marche pas avec firefox ... je préfère donc ta solution Bisûnûrs qui marche avec les deux !

Merci à vous deux !

[E.Bzz]

Je corrigerais juste un petit truc du code de E.Bzz :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

newSpan.className="uneClasse";

Ouhla !
Effectivement