Javascript & Webdesign » classe

ChangeClass — Changer de classe CSS à la volée

Bruno Bichet — Mon, 23 Aug 2010 10:36:49 +0000

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;
    }
}

Sélectionner les éléments par leur classe avec getElementsByClassName

Bruno Bichet — Wed, 16 Dec 2009 09:02:10 +0000

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 — une librairie Javascript « petit mais costaud »

Bruno Bichet — Tue, 01 Dec 2009 06:52:39 +0000

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 !

Changement de design «on the fly» avec jQuery

Bruno Bichet — Wed, 25 Nov 2009 08:26:17 +0000

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.