ChangeClass — Changer une classe CSS à la volée. Trouvé sur cet excellent article de Noupe sur l’utilisation de Javascript et de jQuery pour la majorité des solutions pour régler 12 problèmes courant liés aux navigateurs. Via @zeubeubeu.

function changeClass(oldClass, newClass) {
    var elements = document.getElementsByTagName("*");
    for( i = 0; i < elements.length; i++ ) {
        if( elements[i].className == oldClass ) elements[i].className = newClass;
    }
}

Vous le savez sans doute, mais si le DOM propose une fonction pour sélectionner un élément par son id ou son nom, ce n’est pas (encore) le cas pour sélectionner les éléments qui partagent une ou plusieurs classes. C’est là qu’intervient The Ultimate GetElementsByClassName déjà évoqué dans Utillisez le DOM et Javascript comme un chef pour redéfinir le comportement des balises HTML.

Quelques exemples d’utilisation :

• getElementsByClassName("info-links"); — tous les éléments avec la classe info-links,
• getElementsByClassName("col", "div", document.getElementById("container")); — tous les éléments div contenus dans #container et possédant la classe col,
• getElementsByClassName("pince-me pince-moi"); — tous les éléments avec les classes pince-me et pince-moi.

dLite — Cette bibliothèque propose des fondations pour faciliter vos développements : trouver les éléments avec le même identifiant ou la même classe ; lancer une fonction lorsque le DOM est prêt ; ajouter ou enlever une classe à un élément ; ajouter ou enlever un gestionnaire d’événement (addEvent), etc. Tout ça, pour 4 ko seulement en version compressée, parce qu’il n’y a pas que jQuery dans la vie !

Je vous recommande ce tutoriel clair et didactique qui reprend pas à pas les étapes permettant de permuter deux maquettes sur un clic. L’idée est de changer une classe CSS à la volée et d’arranger le design en fonction des éléments que l’on veut voir apparaitre ou non. Dans un cas, on aura une liste avec une miniature et une description, dans l’autre, les images seront plus grandes et le texte aura disparu.