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;
}
}
Par contre je te raconte pas la ressource de malade que prend cette fonction sur des grosses pages, surtout sur les vieux navigateurs à la IE6…
@rauxbenoit: ca en consommera moins que de charger une librairie qui testera elle aussi tous les éléments de la page.
@br1o: quid des éléments qui possèdent plusieurs classes CSS, il ne seront pas traité pas la fonction car elle effectue un test strict ==.
Ne vaudrait-il pas mieux tester avec indexOf la présence de la classe CSS et effectuer le remplacement avec une bonne regexp ?
De plus FF implémente une méthode native document.getElementsByClassName(), ca pourrait être intérressant de l’utiliser si elle existe.
Genre : http://pastebin.com/rCVLVTaE
@rauxbenoit — yep, c’est clair. Mais il arrive souvent qu’on ait besoin de permuter deux classes sans forcément connaitre le bloc container.
Seebz — la fonction document.getElementsByClassName() est très intéressante. A ce sujet, tu peux aller jeter un oeil sur le billet http://css4design.com/utilisez-le-dom-et-javascript-comme-un-chef-pour-redefinir-comportement-balise-html où je parle de http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/ qui devrait correspondre à tes besoins
Comme le dit rauxbenoit c’est pas folichon niveau qualité quand même. Sans parler des classes multiples mettre elements.length en cache – au minimum – ça aide.
Oui la fonction peut être améliorée mais mettre length en « cache » n’est pas utile, c’est une propriété, pas une fonction, il n’y a donc pas de calcul à chaque demande de la valeur.
En admettant que ce n’est pas recalculé à chaque fois, accéder à une variable locale est moins couteux que de se balader dans un objet.
Le plus gros problème c’est que la fonction parcours le DOM et le modifie en même temps. Si on a une boucle qui récupère les éléments et un autre qui les change à la suite, c’est plus rapide.
enfin bon osef de toute façon…