Changer l'attribut class

Bonjour, je me suis cassé la tête toute la soirée pour parvenir à influer sur la classe d'un élément en javascript, ce qui est normalement élémentaire ! Pourtant, ça ne marche absolument pas !! J'ai retourné mon code dans tous les sens et je ne parviens toujours pas à comprendre, si bien qu'hier je me suis couché assez énervé...
Bref, voilà mon code:

document.getElementsByClassName('class1').className='class2';

Deux questions:
- Pourquoi ça ne fonctionne pas ?
- Comment faire pour que ça fonctionne ?

Merci de votre aide

Salut,

getElementsByClassName() est une méthode qui te renvoie une liste d'élément (tableau).
Tu ne peux donc pas lui appliquer directement la propriété className mais tu peux faire une boucle sur les éléments...

tm

Merci tm™, comment fait-on ceci ?

Avec une boucle for, par exemple :

var el = document.getElementsByClassName('class1');
var nb = el.length;

for(var i = 0; i < nb; i++) {
   el(crochet)i(crochet).className = "class2";
}

tm

NB : visiblement, les crochets ne passent pas et sont interprétés comme du BBcode...

Ça ne fonctionne toujours pas, voilà la simplification de ce que j'aimerais obtenir: http://img11.hostingpics.net/pics/852657Capturedcran20130109140432.png
Modifié par xXjujo002Xx (09 Jan 2013 - 14:07)

el[i ].className

et non pas

el.[i ].className

La boucle aura pour effet de changer la couleur de tous les éléments. SI ne le veux faire que pour celui qui génère l’événement:

<div class="azerty1" onmouseover="green(this)" onmouseout="red(this)">

function green(el){el.className = "azerty2";}

Mais alors autant passé par css.
Modifié par jo_link_noir (09 Jan 2013 - 14:28)

Oui, le but est bien de modifier tous les éléments alors qu'un seul seulement est survolé.
Effectivement ça marche mieux avec "el[i ]" mais certains éléments ne changent pas de couleurs, et d'autres restent bloqué à la seconde couleur (vert):
http://img11.hostingpics.net/pics/484562Capturedcran20130109143320.png

Re,

Le tableau sur lequel tu boucles est modifié lorsque tu changes la classe. Du coup, ça fait des résultats bizarres...

Pourquoi ne pas utiliser CSS ?
Ou du JS un peu plus "propre" via les gestionnaires d'événement ?

Sinon, j'essaierais plutôt un truc comme ça...

tm

Le tableau sur lequel tu boucles est modifié lorsque tu changes la classe. Du coup, ça fait des résultats bizarres...

Ah oui je suis con...

Si je ne passe par css c'est simplement parce que les sélecteurs qui permettraient ce que je cherche à faire sont assez nouveaux et peu compatibles, je préfère donc le javascript.

tm™ a écrit :
du JS un peu plus "propre" via les gestionnaires d'événement

Je ne connais pas, dis-en moi plus ? Autrement, le méthode que tu a employé sur ton lien correspond à ce que je veux, si tu estime qu'elle n'est pas trop lourde, je m'en contenterais amplement

Merci de ton aide
Modifié par xXjujo002Xx (09 Jan 2013 - 16:08)

Deux liens sur la gestion des événements :
La gestion des événements en JavaScript
Gestion cross-browser
Et une évolution intéressante côté DOM :
DOM : querySelector et querySelectorAll

tm

Bah je vais lire tout ça ^^ Merci beaucoup !!
Voilà l'application du code, j'ai encore quelques ajustements à faire mais ça ressemble déjà un peu à ce que je veux... (Attention ça n'est compatible qu'avec webkit pour le moment !)
Modifié par xXjujo002Xx (09 Jan 2013 - 16:24)