Faire un changeur de style en Javascript

Pouvoir modifier ses CSS est toujours intéressant, ça permet à l'utilisateur de se sentir un peu chez soi sur votre site et c'est toujours amusant

Plusieurs méthodes s'offrent à nous en PHP ou en Javascript. Nous verrons ici la méthode en Javascript (la méthode PHP viendra).

Sommaire

Le nécessaire

Pour faire cela on aura besoin de créer un cookie (on verra donc comment cela se fait en js), de le lire, de créer une fonction qui change le style et un petit bout de code dans le HTML

Les cookies

Le code


//------------------------------------

//fonction creation cookie

//------------------------------------

function creerCookie(name,value,days) {

 if (days) {

  var date = new Date();

  date.setTime(date.getTime()+(days*24*60*60*1000));

  var expires = "; expires="+date.toGMTString();

 }

  else expires = "";

  document.cookie = name + "=" + value + expires + "; path=/";

 }



//------------------------------------

//fonction lecture cookie

//------------------------------------

function lireCookie(name) {

 var nameEQ = name + "=";

 var ca = document.cookie.split(';');

 for(var i=0;i < ca.length;i++) {

  var c = ca[i];

  while (c.charAt(0)==' ') c = c.substring(1,c.length);

  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

 }

 return null;

 }

L'explication

Voilà, voilà, pas grand chose à expliquer, donc en js on manipule les cookies tout simplement grâce à document.cookie.

La fonction qui change le style

Le code


function setActiveStyleSheet(title) {

 var i, a, main;

 currentStyle = title;

 for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {

  if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {

  a.disabled = true;

  if(a.getAttribute("title") == title) a.disabled = false;

  }

 }

}

L'explication

title est le nom de notre CSS qu'on passe grâce à un clic dans le HTML que l'on va voir juste après, on pointe nos css grâce au tag via le getElementsByTagName, on les parcoure et si le titre de notre css n'est pas celui que l'on a choisi, on le "désactive" sinon on l'active. Simplissime, non ?
Bon...

Le bonus Javascript

Le code


 var defaultStyle = "css1";

 var currentStyle;

 var cookies = lireCookie("style");

 var bgStyle = ((cookies == "css1") || (cookies == "css2") || (cookies == "css3")) ? cookies : defaultStyle;

 setActiveStyleSheet(bgStyle);

L'explication

Bon, j'avais pas vraiment parler de ça mais bon, c'est mon coté grand seigneur, c'est cadeau pour la route.

Simplement, le soucis si on ne rajoute pas ce petit bout de script, au début de votre script, déjà l'utilisateur ne conservera pas ses CSS d'une page à l'autre, ce qui est quand même moins rigolo. Mais surtout, plus grave, à sa première visite, l'utilisateur pourrait tombé nez à nez avec votre site sans la moindre petite trace de feuille de style, ce qui est, et même si votre site est d'un contenu exceptionnel, pour le moins rebutant.
Certains diront que c'est arrivez ici mais je nie tout !

Donc on crée une variable style par défaut, on crée une variable cookies pour lire le cookie si l'utilisateur est déjà venu sur votre site, comme il n' y a pas d'équivalent en Javascript du isset de PHP (du moins je n'en connais pas...) on utilise l'opérateur conditionnel de js qui est le ? et qui agit comme un if...else en testant la condition le précédant et en revoyant la première valeur si c'est vrai, la seconde si c'est faux. En résumé si l'utilisateur n'est jamais venu on charge le css par défaut.

Le HTML

Le code






<link title="css1" rel="stylesheet" type="text/css" href="style.css" media="screen" />

<link title="css2" rel="alternate stylesheet" href="style2.css" type="text/css" media="screen">

<link title="css3" rel="alternate stylesheet" href="style3.css" type="text/css" media="screen">



<!--

---------------------------------------------------

- 2 solutions pour appeler la fonction

----------------------------------------------------

-->



<!--methode 1-->

<a href="javascript:setActiveStyleSheet('css1')">css1</a>

<a href="javascript:setActiveStyleSheet('css2')">css2</a>

<a href="javascript:setActiveStyleSheet('css3')">css3</a>



<!--methode 2-->

<a href="#" onClick="setActiveStyleSheet('css1')">css1</a>

<a href="#" onClick="setActiveStyleSheet('css2')">css2</a>

<a href="#" onClick="setActiveStyleSheet('css3')">css3</a>