DOM et CSS [Résolu]

[M4veR1K]

Bonjour,

Je crée un outil en javascript pour mon entreprise. On travaille sur IE7.
C'est tout simplement une liste de checkbox. Je la crée dynamiquement en utilisant une approche objet et j'utilise DOM pour la création des différents éléments.

Le problème, c'est qu'une fois que j'ai terminé mon arbre après tous les appendChild(), l'objet apparait bien, mais n'est pas affecté par la feuille de style défini pour la page.
Plus, les balises labels affectées aux inputs ne fonctionnent pas.
(ça marche sur Firefox par contre...)

J'arrive à corriger ces erreurs lorsque j'utilise ça en fin de création :

Code :

this.object.innerHTML = this.object.innerHTML;

Cependant avec cette méthode, les méthodes anonymes de mes events ne fonctionnent plus. Et puis je trouve ça un peu moche.

Y a t-il une solution (autre que de recopier tout le css dans les attributs "style" des éléments) pour que le css soit appliqué sur mon objet?

[M4veR1K]

Une solution consisterait à faire le innerHTML puis récupérer le composant auquel on veut ajouter un évènement pour lui affecter.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
this.object.appendChild(lblCbList);
this.object.appendChild(table);
 
/*
* Alors, voila le problème, si on ne rajoute pas la ligne si dessous, le css n'est pas appliqué.
* Si on la rajoute, les évènements ('onclick' par exemple) ne sont plus pris en compte.
* Sur IE7 (tjs).
*/
this.object.innerHTML = this.object.innerHTML;
 
// voila la méthode pour garder les évènements, c'est les mettre en place après le innerHTML
cbCheckAll = document.getElementById("cbListCheckAll_" + this.id);
cbCheckAll.refObject = this;
cbCheckAll.onclick = function()
{
	this.refObject.selectAll(this.checked);
};

C'est pas vraiment la solution que j'espérais, mais ça fait l'affaire. Enfin bon, à quoi bon utiliser DOM si c'est pour à la fin faire un innerHTML...

Je mettrais le sujet comme résolu plus tard dans la journée, au cas où vous auriez d'autres solutions, plus intéressantes.

[M4veR1K]

Je corrige ma dernière réponse. Je ne voulais pas que des gens tombent sur mon ancienne solution.

En fait, IE7 n'a pas trop de soucis avec DOM.
Si le css ne marchait pas, c'est car on n'écrit pas:

Code :

input.setAttribute("class", "maClasse");

mais

Code :

input.setAttribute("className", "maClasse");

Même chose, pour que les labels fonctionnent :

Code :

1
2
label.setAttribute("for", "myInput"); // ne marche pas
label.setAttribute("htmlFor", "myInput"); // marche !

Du coup, plus besoin d'utiliser innerHTML, et de ce fait, les évènements marchent.

[sekaijin]

Oui il faut lire la spec du W3C sur HTML et le DOM

il existe quelques attributs qui n'ont pas le même nom dans le source HTML que dans le DOM

de même pour les attributs CSS qui sont des propriétés de l'attribut style dans le DOM n'ont pas le même nom qu'en CSS

une bonne lecture permet d'éviter ces petits pièges

A+JYT