comment integrer plusieurs css ?¿?¿

**artotal** · 27/12/2005, 19h31

Bonjour,
voilà, sur mon futur site j'aimerai intégrer plusieurs feuilles de style, donc un script en .js ou en php ferait l'affaire, comme je ne vaux pas réinventer la roue, j'aimerai que vous me fassiez de vos experiences réspectives et comparer à travers travaux et script se qui se fait ou est à faire.
Merci pour votre patience
PS : la page multi-css : http://creatif-web.be/port_folio/

**siddh** · 27/12/2005, 20h12

connais tu le site http://www.csszengarden.com ?

**artotal** · 27/12/2005, 20h38

oui je connaissait, je vais souvent voir les nouveautés, mais c'est en anglais !
Et j'aimerai une ressource [fr] de préference enfin pour l'explication, même si avec le code on comprend.

**siddh** · 27/12/2005, 20h40

fais des recherches sur style switcher sur le forum

**artotal** · 27/12/2005, 20h53

en effet il y a des ressources !
A première vue le php est préferé, comme j'héberge mes sites, je prefere le .js pour économisez de la bande passante, surtout si c'est pas vital au fonctionnement du site, merci, j'étudie sa,
@++

**irenee** · 27/12/2005, 21h05

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript">
 
function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}
function getActiveStyleSheet() {
  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;
}
function getPreferredStyleSheet() {
  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;
}
function createCookie(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=/";
}
function readCookie(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;
}
function SwitchClass(c,t) {
  // Fonction de test des classes
  function TestDbClass(val) {
    var DbClass = ['hide','block','list-item','normal','gras'];
    for (var db = 0; db < DbClass.length; db++) {
      if (val == DbClass[db]) {
        return true;
        break;
      }
    }
    return false;
  }
  // Si aucune classe, ajouter la classe voulue
  if (c == '') {
    c = t;
  }
  // Si 1 ou plusieurs classes, garder la(les) bonnes
  else {
    if (c.indexOf(' ',0) > 0) {
      var cSplit = c.split(' ');
      var cCorr = '';
      for (var s = 0; s < cSplit.length; s++) {
        if (TestDbClass(cSplit[s]) == false) {
          if (cCorr == '') {
            cCorr = cSplit[s];
          }
          else {
            cCorr = cCorr + ' ' + cSplit[s];
          }
        }
      }
      c = cCorr;
    }
    (TestDbClass(c) == true) ? c = t : c = c + ' ' + t;
  }
  return c;
}
 
window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}
window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
 
</script>
<link rel="stylesheet" type="text/css" href="style.css" title="style" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
</head>
<body>
<a href="#" name="style1" onclick="setActiveStyleSheet('style');">Style 1</a>
<a href="#" name="style2" onclick="setActiveStyleSheet('style2');">Style 2</a>
</body>
</html>

Un javascript qui crée un cookie de style ...
Ca peut toujours servir ...

**artotal** · 27/12/2005, 21h11

Irène j'en profite, peux tu me dire "getElementsBy", je le vois un peu partout mais je ne définis pas bien se que c'est ?
Obtenir l'élément par le lien je crois ?

**irenee** · 27/12/2005, 21h50

oui en effet , si dans ton html tu donne a un composant un id , alors cette fonction permet de récupérer cet élément et donc tu peut y faire des modifications sur cet élément via le javascript...
Mais , attention , cette fonction n'est pas compatible tous navigateurs !!!
Il me semble que Netscape ne la supporte pas .

**artotal** · 28/12/2005, 02h32

Irenee ton code chez moi ne fonctionne pas ?
je me suis rabattus sur une solution php, mais pareil, je suis maudit !

http://giminik.developpez.com/articl...witcher/#menus

**irenee** · 28/12/2005, 11h49

hummm c'est bizarre ... Les seules choses que tu devais faire étaient de remplacer le href des lien des feuilles de style .
Chez moi il fonctionne tres bien ...

Tu utilise quel navigateur ? As tu bloqué les cookies ?

**artotal** · 28/12/2005, 12h40

j'utilise FF, mais sa fonctionne en php enfin j'ai encore les réglages habituels

Code :

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

1
2
3
4
5
6
<link rel="stylesheet" type="text/css" href="style.css" title="style" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
</head>
<body>
<a href="#" name="style1" onclick="setActiveStyleSheet('style');">Style 1</a>
<a href="#" name="style2" onclick="setActiveStyleSheet('style2');">Style 2</a>

J'ai bien remplacer mon lien

Code :

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

1
2
3
 
<link rel="stylesheet" type="text/css" href="mon_style_1.css" title="style" />
<link rel="alternate stylesheet" type="text/css" href="mon_style_2.css" title="style2" />

Code :

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

1
2
3
 
<a href="#" name="style1" onclick="setActiveStyleSheet('mon_style_1.css');">Style 1</a>
<a href="#" name="style2" onclick="setActiveStyleSheet('mon_style_2.css');">Style 2</a>

comment integrer plusieurs css ?¿?¿

CSS

Vue hybride

Discussions similaires

Partager

Partager