Table des matières
Niveau
..........
En rapport...

Quoi

Il existe une methode pour changer dynamiquement de CSS sans pour autant avoir besoin de refresh.
Dans le principe, toute les feuilles de style sont chargée et désactivé, sauf une, la principale.
Et lorsque l'utilisateur demande un nouveau style, on active la feuille correspondante.

Code

Le code Javascript se divise en 4 fonctions principales :
Activer une feuille de style :

javascript
function setActiveStyleSheet(title) {
/*
On passe un a un les balise <link>,
Pour chaque balise  dont 
	1- l'attribut "rel" contient le mot "style"  
	2- l'attribut "title" existe
on active la balise link et, si le parametre "title" est égal a la variable title, on désactive la balise.
*/
  var i, a, main;
  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;
    }
  }
}

Récupéré le nom de la feuille de style active :

javascript
function getActiveStyleSheet() {
/*
On passe un a un les balise <link>,
Pour LA balise  dont 
	1- l'attribut "rel" contient le mot "style"  
	2- l'attribut "title" existe
	3- Qui n'est pas désactivé
on renvoie le title de cette balise.
Si pas de coorespondance, on renvoie null
*/
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

Récupérer le nom de la feuille de style principale :

javascript
function getPreferredStyleSheet() {
/*
On passe un a un les balise <link>,
Pour LA balise  dont 
	1- l'attribut "rel" contient le mot "style" 
	2-l'attribut "rel" ne contient pas le mot "alt"
	2- l'attribut "title" existe
on renvoie le title de cette balise,
si pas de corespondance, on renvoie null
*/
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

Lancer l'activation du bon CSS au chargement de la page (ce n'est pas détailler dans l'exemple, mais on pourrait immaginer mémoriser dans un cookie le CSS choisi par l'internaute et lui rétablir son style a chaque visite.) :

javascript
window.onload = function(e) {
/*
A la fin du chargement de la page, récupere le CSS par defaut et l'active.
Si ce css était mémorisé par cookie, cela permetrait de rétablir le style choisie en derneir par l'internaute
*/
  var title = getPreferredStyleSheet();
  setActiveStyleSheet(title);
}
 
/*
Au chargement de la page, récupere le CSS par defaut et l'active.
Si ce css était mémorisé par cookie, cela permetrait de rétablir le style choisie en derneir par l'internaute
*/
var title = getPreferredStyleSheet();
setActiveStyleSheet(title);



Maintenant l'html, il est assez simple.
Pour définir une feuille de style toujours active déclarer la comme ceci :

html4strict
<link rel="stylesheet" type="text/css" href="green.css" />

et pour définir une feuille de style alternative, activée par action de l'internaute, déclarer la comme ceci :

html4strict
	<link rel="alternate stylesheet" type="text/css" href="red.css" title="red" />
	<link rel="alternate stylesheet" type="text/css" href="blue.css" title="blue" />

Ici donc, par defaut l'utlisateur verra la feuille de style “green” car les 2 autres seront désactivé par le JS setActiveStyleSheet au chargement de la page.
Pour que l'ultisateur puisse choisir son CSS, il faut rajouter des liens, voici la syntaxe :

html4strict
<a href="#" onclick="setActiveStyleSheet('normal'); return false;">Passer en mode normal</a> <br/>
<a href="#" onclick="setActiveStyleSheet('red'); return false;">Passer en rouge</a><br/>
<a href="#" onclick="setActiveStyleSheet('blue'); return false;">Passer en bleu</a>

Chaque lien fait référence a setActiveStyleSheet et passe le title du CSS a activer.

A noter que lemode normal tente d'activer le CSS qui a pour title “normal” or, aucun CSS n'a ce title. Ce qui va avoir pour effet de désactiver les deux CSS alternatif (red et blue) et laisser plus que green.


Lorsque red ou blue est activé, le css green est toujours activé car c'est le CSS principal. Il n'a pas “alternate” dans sa balise title.

Astuces

En deffinissant toutes les tailles de police en “em” sauf celle du body, vous pouvez prevoir des CSs alternatif qui augmenterons ou diminuerons les police de votre site plus facilement.
En effet, les css alternatif n'auront qu'a redefinir la taille de police du body, pour que tout les site s'adapte !


iDo 18/11/2005 09:32