[JavaScript] [SRC] Changer de feuilles de style en Javascript [Résolu]

troumad · 01/02/2008, 16h28

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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).

Bisûnûrs · 01/02/2008, 16h55

Et pourtant, sur la même page tu as aussi :

http://www.developpez.net/forums/sho...d.php?t=380160

L'article est en cours de réflexion.

troumad · 01/02/2008, 17h08

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 <div class="style">
  <select>
  <script type="text/JavaScript">
  //<![CDATA[
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++)
   if (a.getAttribute("rel")=="stylesheet" && a.getAttribute("media")=="screen")
    document.write("<option onclick='changeStyle(\""+ a.getAttribute("title") +"\")'>"+a.getAttribute("title")+"</option>")
  //]]>
  </script>
  </select>
 </div>

Et hop... Le menu automatique pour proposer tous les styles

troumad · 01/02/2008, 17h18

Citation:

Envoyé par Bisûnûrs

Et pourtant, sur la même page tu as aussi :

http://www.developpez.net/forums/sho...d.php?t=380160

L'article est en cours de réflexion.

Je n'avais pas vu !
Mais l'approche ne semble pas la même. Je me suis contenté de plus simple il me semble.
Il est où l'article en cours de réflexion ?

dingoth · 04/02/2008, 14h11

Et ceux qui sont un peu malins en lisant la doc HTML, et qui écrivent rel="alternate stylesheet" (ou même rel="StyleSheet") au lieu de rel="stylesheet", ils l'ont dans le baba

mieux vaut faire donc :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (a.getAttribute("rel").match(/(^|\s)stylesheet(\s|$)/i) && a.getAttribute("media").match(/(^|\s)(screen|visual)(\s|$)/i))

04/02/2008, 14h11	#5
dingoth Membre Expert Inscription : mai 2004 Messages : 1 253 Détails du profil Informations personnelles : Localisation : Belgique Informations forums : Inscription : mai 2004 Messages : 1 253 Points : 1 290 Points : 1 290	Et ceux qui sont un peu malins en lisant la doc HTML, et qui écrivent rel="alternate stylesheet" (ou même rel="StyleSheet") au lieu de rel="stylesheet", ils l'ont dans le baba mieux vaut faire donc : Code : Sélectionner tout - Visualiser dans une fenêtre à part if (a.getAttribute("rel").match(/(^\|\s)stylesheet(\s\|$)/i) && a.getAttribute("media").match(/(^\|\s)(screen\|visual)(\s\|$)/i))
	00

01/02/2008, 16h55	#2
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Et pourtant, sur la même page tu as aussi : http://www.developpez.net/forums/sho...d.php?t=380160 L'article est en cours de réflexion.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email