Changer de CSS avec Javascript et Prototype

Il y a longtemps que je voulais faire un petit script permettant de changer le CSS de son site sans avoir a recharger la page.

Je me suis documenter sur Prototype pour savoir comment manipuler les DOMs et je suis arriver à un petit script … vraiment petit !

Déjà, il faut créer votre page HTML en pensant à bien ajouter prototype dans les javascript.

Ensuite il faut réaliser vos CSS afin de pouvoir changer les couleurs de vos sites comme vous voulez

et enfin il faut créer un petit bout de javascript (mais vraiment petit) mais qui possède une puissance assez conséquente !

Dans un premier temps, il faut identifier la premier css inclut dans votre site (le principal) :

$$('link[rel=stylesheet]')

avec ce code on peut recherche les DOMs avec les sélecteurs CSS, on va cherche les links qui ont un rel égale à stylesheet .

Ensuite on va transformer cette liste en tableau pour avoir la méthode qui permet de récupérer le premier élément de ce tableau (le CSS principal) :

$A($$('link[rel=stylesheet]')).first()

$A permet de transformer les éléments retourner en type Enumérable et de pouvoir chercher le premier élément avec la méthode first()

Enfin il nous suffit de changer l’attribut href de cet élément par le nouveau CSS

$A($$('link[rel=stylesheet]')).first().setAttribute('href','css/monstyle.css');

Ici, avec setAttribute on change l’attribut href avec le deuxième paramètre

Finalement, on peut aussi créer une fonction très simple, afin de pouvoir spécifier dynamiquement le CSS comme ceci :

function change_css(style){
	$A($$('link[rel=stylesheet]')).first().setAttribute('href','css/'+style+'.css');
}

Voici le résultat : Changer de CSS avec Javascript et Prototype démonstration
Avec ce mini bout de code, à vous les sites avec plusieurs styles !