picture picture
janvier 14, 2006 JavaScript 1 Commentaire

Comment utiliser un changeurs de style en JavaScript ?

Les feuilles de style CSS au choix du visiteur

 

Les amateurs connaissent déjà le merveilleux ZenGarden, démontration parfaite de la puissance des feuilles de style en oeuvre.

FireFox sait permettre l’affichage de feuilles de style alternatives, appelées de la manière suivante :
<link rel="stylesheet" type="text/css" media="screen"
title="default" href="/styles/default.css" />
<link rel="alternate stylesheet" type="text/css" media="screen"
title="style1" href="/styles/style1.css" />
<link rel="alternate stylesheet" type="text/css" media="screen"
title="style2" href="/styles/style2.css" />
<link rel="alternate stylesheet" type="text/css" media="screen"
title="style3" href="/styles/style3.css" />
<link rel="alternate stylesheet" type="text/css" media="screen"
title="style4" href="/styles/style4.css" />

De cette manière, Firefox les affichera dans un sous-menu spécial, « Style de la page », se trouvant dans le menu « Affichage ».
Ce n’est pas tres intuitif… et il faut déjà être initié pour en profiter.

Autre méthode : celle qui a été developpée et proposée en JavaScript par Paul Sowdenn sur son blog, sous la forme d’un JavaScript appelé styleswitcher.js
Pour l’exploiter correctement, il faut d’abord l’inclure à la page HTML :
<script type="text/javascript" src="styleswitcher.js"></script>
le script lui-meme (styleswitcher.js, téléchargeable ici), est à mêttre sur votre serveur à l’emplacement indiqué ci-dessus (au même niveau dans mon exemple)

Il suffit ensuite de placer les appels JavaScript nécessaires n’importe o๠dans le body:
<a href="#" onclick="setActiveStyleSheet('default');
return false;">Style par défaut</a>
<a href="#" onclick="setActiveStyleSheet('style2');
return false;">style2</a>
<a href="#" onclick="setActiveStyleSheet('style3');
return false;">style3</a>
<a href="#" onclick="setActiveStyleSheet('style4');
return false;">style4</a>
<a href="#" onclick="setActiveStyleSheet('style5');
return false;">style5/a>

Les visiteurs sont désormais libres de choisir leur charte graphique :-)

One Response to “Comment utiliser un changeurs de style en JavaScript ?”

One Comment

Commentaire

Name

Mail (ne sera pas publié)

Website

Laisser ces deux champs tels quels :
:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: