[SRC] Changer de feuilles de style en Javascript
Bonjour
J'ai longtemps cherché, pas trouvé quelque chose de clair et encore moins sur dvp.com !
Je suis arrivé à faire un code satisfaisant et simple, alors je le propose ici :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| <?php echo ('<?xml version="1.0" encoding="utf-8"?>'); ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<link rel="shortcut icon" href="images/notes.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Author" content="Troumad" />
<meta name="Description" content="Linux" />
<meta name="Keywords" content="Nous" />
<meta name="Identifier-URL" content="http://troumad.org" />
<meta name="Reply-to" content="troumad@libertysurf.fr" />
<meta name="revisit-after" content="31" />
<meta name="Publisher" content="Troumad" />
<meta name="Copyright" content="gpl" />
<meta name="Generator" content="kwrite" />
<title>Notations</title>
<link rel="stylesheet" type="text/css" media="screen" title="Defaut" href="/include/style.css" />
<link rel="stylesheet" type="text/css" media="screen" title="Test" href="/include/style1.css" />
<script type="text/JavaScript">
//<![CDATA[
function changeStyle(nv_style)
{
for(i=0; (a = document.getElementsByTagName("link")[i]); i++)
if (a.getAttribute("rel")=="stylesheet" && a.getAttribute("media")=="screen")
if (a.getAttribute("title")==nv_style)
a.disabled = false;
else
a.disabled = true;
}
function donneStyle()
{
for(i=0; (a = document.getElementsByTagName("link")[i]); i++)
if (a.getAttribute("rel")=="stylesheet")
if (!a.disabled)
alert(a.getAttribute("title") + " pour le media " + a.getAttribute("media"));
}
//]]>
</script>
</head>
<body>
<p>Style : <a href="#" onclick="changeStyle('Defaut')">Defaut</a> ou <a href="#" onclick="changeStyle('Test');">Test</a></p>
</body>
</html> |
Quelques explications ;)
1) Je fais du php, donc j'ai du trouver une astuce pour la première ligne (rien à voir avec notre sujet)
2) Dans mon entête, j'ai plusieurs balise link dont deux de css pour l'écran.
3) Mes fonctions changeStyle et donneStyle parcourent les balises link et repèrent celles dont l'attribut rel est stylesheet : mes feuilles de style ;)
4) Pour la fonction changeStyle qui va activer le style nv_style, je ne fais le changement que sur le media screen (écran)
Après je rend actif la bonne page de style et désactive les autres (enfin c'est inversé dans la nommination : je déactive ou active la déactivation....)
5) Pour la fonction donneStyle j'affiche les style activé (déactiva = faux, c'est inversé !) tout en signalant sur quel média il est actif.
Je suis là pour plus d'information ;) Je pense que ce serait bien en FAQ ou Petit article si ça ne l'est pas encore.
À partir de là s'ouvre pleins d'horizons : menu automatique pour choisir les styles...
nb : testé uniquement sur FireFox et Konqueror. S'il existe d'autres navigateurs, je ne les connais pas (ou je ne veux pas en entendre parler).
