Mise à jour de class via DOM sans setAttribute ...

Bonjour,
Je souhaite mettre à jour le nom de class d'un élément DIV à l'aide de DOM. J'ai commencé à utiliser getAttribute() et setAttribute(), mais j'ai vite compris mon malheur avec IE6 (plantage etc...).

En gros je veux simplement passer d'un

<div class="style1"></div>

à

<div class="style2"></div>

Par le biais d'un "onclick" sur la même page, sans rechargement.

Je suis en train de chercher, mais si quelqu'un à une solution...
Merci !

PS : si modifier une classe pose problème, ne peut-on pas simplement supprimer cette classe pour ensuite ajouter une nouvelle classe ?
Modifié par sebus (19 Jul 2007 - 16:59)

Essaye de récupérer tes div avec la fonction getElementsByClassName() ce qui te renverra un tableau d'objets. Tu fais une boucle sur le tableau et tu changes la classe de chacun de tes blocks (objet) grâce à l'attribut className (objet.className = "style2")

function getElementsByClassName(oElm, sTagName, sClassName){
    var aElements = (sTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(sTagName);
	var aReturnElements = new Array();
    sClassName = sClassName.replace(/\-/g, "\\-");
	var oRegExp = new RegExp("(^|\\s)" + sClassName + "(\\s|$)");
	var oElement;
	for(var i=0; i < aElements.length; i++){
		oElement = aElements[i];      
		if(oRegExp.test(oElement.className)){
           // aReturnElements.push(oElement);
            aReturnElements[aReturnElements.length] = oElement;
        }   
    }
	return (aReturnElements)
}

[/i]

Oui, le plus simple est effectivement d'utiliser la propriété className. Mais la méthode document.getElementsByClassName n'existe pas en natif en javascript... et c'est pourquoi il faut utiliser ce que te propose 46chroms.
Modifié par Gilles (19 Jul 2007 - 17:28)

Ok, j'ai trouvé la source de cette fonction et je l'ai mise en place, extrait :

var arrReturnElements = getElementsByClassName(document,"div","Bloc126Arr MargTop MargRight");
	
for (j=0;j<arrReturnElements;j++) {
arrReturnElements.className="SBloc125 MargTop MargRight";}

Mais ça ne fonctionne pas, je n'ai pas d'erreur, mais pas de changement non plus... Bon, je suis pas super fort avec tout ça...
Ma boucle est fausse ?
Modifié par sebus (19 Jul 2007 - 18:19)

Commence par remplacer j<arrReturnElements par j<arrReturnElements.length

Sinon, Essaye en englobant tes div par un div général comme <div id="content"> et remplace ton 1er paramètre de la fonction getElementsByClassName par document.getElementbyId("content")

Et aussi mets arrReturnElements[j].className à la place de arrReturnElements.className

Merci à tous, mon menu fonctionne parfaitement à présent. Et en plus j'ai encore appris des choses aujourd'hui