Changer dynamiquement le CSS d'une page

**Nesta Puccino** · 24/06/2009, 21h45

Bonjour, je suis totalement débutant en javascript et je voudrais changer, via l'appel d'une fonction sur un bouton "apparence 1" "apparence 2" etc le style CSS de ma page html.

J'ai donc pensé à capter le noeud "link" et de changer son attribut "href" lors du click.

Voici mon code :

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
function changeCSS()
{
  var tab=document.getElementsByTagName('head');
  var tabEnfants=new Array();
  tabEnfants=tab.childNodes;  /* ou var tabEnfants=tab.childNodes; (normalement ça le met directement dans un tableau le childNodes non ??) */
 
  for(i=0;i<tabEnfants.length; i++)
  {
      if(tabEnfants[i].tagName=="link")
      {
          tabEnfants[i].tagName.setAttribute('href', 'style2.css');
      }
  }
 
  alert("bonjour");
 
}

Voici comment je l'implémente dans le html :

Code :

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

1
2
3
4
5
6
7
8
9
10
  <head>
     <script type="text/javascript" src="changeCSS.js" >   </script> 
  <link rel="stylesheet" type="text/css" href="style_defaut.css">
 
  </head>
<body>
<form name="formCSS" action="">
<input type="button" value="Test" onclick="changeCSS()"/> 
</form>
</body>

Et lorsque j'éxécute le firebug il me met erreur à la ligne
"for(i=0;i<tabEnfants.length; i++)"
tabEnfants ---> undefined !!

Alors que je l'ai bien définis non ??

ps : pourquoi je dois redémarrer une nouvelle page firefox au bout de trois clics sur le boutons javascript sinon le js n'a plus l'air de fonctionner ?

Merci par avance pour toute réponse !

Cordialement.

**Vil'Coyote** · 24/06/2009, 23h18

Salut,
j'avous ne pas trop voir ou se place le soucis (pour l'instant) cependant je me pose une question sur ton code html. Est ce normal d'avoir les balise <head></head> dans le body? il me semble que rien que ça cela devrais poser problème.

**Bovino** · 25/06/2009, 06h37

Salut,
Bien que JavaScript soit faiblement typé, il est assez susceptible sur les tableaux.
Dans ton cas, tu déclares une variable de type Array mais tu lui affectes une collection.
Ceci dit, tu te compliques pas mal la vie alors qu'un simple

Code :

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

1
2
3
4
5
6
function changeCSS()
{
  var mon_css=document.getElementsByTagName('link')[0];
  mon_css.setAttribute('href', 'style2.css');
  alert("bonjour");
}

devrait suffire

**Nesta Puccino** · 25/06/2009, 19h17

Envoyé par Vil'Coyote

Salut,
j'avous ne pas trop voir ou se place le soucis (pour l'instant) cependant je me pose une question sur ton code html. Est ce normal d'avoir les balise <head></head> dans le body? il me semble que rien que ça cela devrais poser problème.

Je m'étais trompé en voulant alleger le copié collé mais merci quand même ^^.

Envoyé par Bovino

Salut,
Bien que JavaScript soit faiblement typé, il est assez susceptible sur les tableaux.
Dans ton cas, tu déclares une variable de type Array mais tu lui affectes une collection.
Ceci dit, tu te compliques pas mal la vie alors qu'un simple

Code :

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

1
2
3
4
5
6
function changeCSS()
{
  var mon_css=document.getElementsByTagName('link')[0];
  mon_css.setAttribute('href', 'style2.css');
  alert("bonjour");
}

devrait suffire

Ca marche parfaitement...et c'est beaucoup plus simple.
Ce qui m'énerve, c'est que je comprends pas pourquoi mon code ne marche pas.
Si jamais tu pouvais juste m'expliquer la signification de ton code :

var mon_css=document.getElementsByTagName('link')[0];
là tu enregistre dans un tableau tous les noeuds du noeud "link" ? que signifie le [0] en fait c'est ça que je capte pas..
Si tu pouvais m'éclaircir, ça m'aiderait beaucoup pour progresser.

Merci en tout cas !

**SpaceFrog** · 25/06/2009, 19h28

en fait il mets dans un array toutes les balises link de la page ...
le premier indice du tableau est 0

le souci est si tu as d'autres balises link ... il faudra bien les ordonner sur la page..
Sinon on doit pouvoir passer par un id non ?

on doit aussi pouvoir passer par un id

**Nesta Puccino** · 25/06/2009, 19h35

Envoyé par SpaceFrog

en fait il mets dans un array toutes les balises link de la page ...
le premier indice du tableau est 0

Aaaah
si j'ai bien compris l'instruction :
var mon_css=document.getElementsByTagName('link')[0]; signifie qu'il sauve le premier link dans la variable mon_css c'est ça ?
vraiment beaucoup plus simple effectivement !

Merci beaucoup !