PARSOFLEX

Il peut parfois être utile de modifier entièrement la feuille de style d’une page afin d’en changer l’apparence sans devoir recharger la page ou altérer les règles fixées dans la feuille de style.

Si vous proposez par exemple à l’utilisateur de changer la skin de la page en lui offrant la possibilité d’en visualiser le résultat immédiatement.

Dans cet exemple je vais utiliser 2 css, la première noir_blanc.css habille votre page ne noir et blanc, la seconde couleur.css lui redonne des couleurs.

voir le résultat >> (c’est très moche mais l’intention est juste d’illustrer le propos :-))

Le principe est très simple :

1) ajouter une classe à votre appel de css

	<link class="modifiable" href="css/color.css" rel="stylesheet" />

ici une classe modifiable qui n’a d’autre but de récupérer l’élément <link > ayant une classe ‘modifiable’ avec un petit script java-script qui modifiera le href de l’élément. Bien entendu c’est le principe qui importe et cet exemple n’a  pas d’autre ambition que de le présenter

 2) ajouter le script:

<script>
$(document).ready(function () {
           $('#nbLink').on('click',function(event){
            event.preventDefault();
            $("link.modifiable").attr("href","css/noir_blanc.css");
           })
           $('#colorLink').on('click',function(event){
            event.preventDefault();
            $("link.modifiable").attr("href","css/color.css");
             })
         })
</script>

3)pour finir ne reste plus qu’à créer vos liens avec les mêmes id

<li><a href="#" id='nbLink' class='lesLiens'>noir et blanc</a></li> <li><a href="#" id='colorLink' class='lesLiens'>couleur</a></li> ...lire la suite