Changer dynamiquement le CSS d'une page
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:
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:
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.
