charger une feuille de style via javascript

Version imprimable

04/12/2008, 19h42
yakusa77

charger une feuille de style via javascript

Bonjour a tous,
voila mon problème,
J'ai creer 2 css , je voudrais proposer aux visiteurs de ma page de choisir via un menu déroulant 1 des 2 skin.
Je voudrais le faire via du javascript si cela est possible mais je ne voie pas quoi mettre dans ma fonction...
Quelqu'un peut-il m'aider?
Merci d'avance.
04/12/2008, 20h16
Astartee

Tu ferais mieux de poster sur le forum javascript :nono:

Et tu devrais commencer à chercher tout seul, c'est assez simple.
Il faut :
- déclencher l'exécution de la fonction lorsque l'utilisateur choisit un css ou clique sur un bouton
- déterminer le choix de l'utilisateur
- remplacer le css existant par celui choisi
Laquelle de ces étapes te pose problème ?
04/12/2008, 20h20
yakusa77

J'ai déja cherché mais je ne trouve rien qui se rapproche de ce que je veux faire.
Ce qui me pose probleme c'est la ligne de commande pour charge la feuille de style je ne vois pas du tout comment faire...???
04/12/2008, 20h33
Astartee

Citation:

Envoyé par yakusa77

Ce qui me pose probleme c'est la ligne de commande pour charge la feuille de style

Il suffit de modifier la valeur de l'attribut href de l'élément :

Code:

<link rel="stylesheet" href="chemin_vers_le_css"/>
04/12/2008, 21h43
yakusa77

Non c'est pas dans le html que je veux pouvoir mettre le liens
mais je pense qu'il faut creer une fonction par exemple skin1 et une fonction skin2 avec des onclick dans l'html.Nan?
quelque chose comme ca pour le javascript

Citation:

function skin1()
{
//c'est ici que je ne sais pas quoi mettre pour charge la page de css
<link rel="stylesheet" href="chemin_vers_le_css"/>
}

et dans l'html :

Citation:

<input type="button" name="skin1" value="Skin1"
OnClick="skin1()">

Merci de me répondre...
04/12/2008, 22h03
Astartee

Citation:

Envoyé par yakusa77

Non c'est pas dans le html que je veux pouvoir mettre le liens

Et pourtant je t'assure que c'est comme ça qu'il faut faire.
Est-ce que tu as essayé ?

Citation:

Envoyé par yakusa77

je pense qu'il faut creer une fonction par exemple skin1 et une fonction skin2 avec des onclick dans l'html

Pourquoi pas.
Ou alors, si tu envisages d'ajouter encore d'autres skins par la suite, tu peux aussi utiliser une liste déroulante et appliquer une unique fonction soit sur l'élément onChange de la liste, soit sur l'événement onClick d'un bouton à côté.
05/12/2008, 09h53
yakusa77

Oui je viens d'essayer ce que tu as mis ca ne marche pas même en changeant les possibilités guillemets...
05/12/2008, 10h12
Bovino
Essaye :

Code:

<link rel="stylesheet" href="chemin_vers_le_css" id="mon_style" />

et
Code:

1 2 3 function changeStyle(lien){ document.getElementById('mon_style').href = lien; }
En adaptant évidemment ton code pour envoyer les bonnes valeurs !
05/12/2008, 10h32
yakusa77

Alors quand je fais ca ca me charge directement le style,comment faire pour passer par un ménu déroulant ou un bouton?
05/12/2008, 10h35
Astartee

Citation:

Envoyé par yakusa77

Alors quand je fais ca ca me charge directement le style,comment faire pour passer par un ménu déroulant ou un bouton?

Eh bien, comme tu l'as proposé toi-même plus faut, tu appliques cette fonction sur l'événement onClick du bouton ;)

Code:

1
2
3
4
<select onchange="changeStyle(this.value)">
<option value="lien1">Style 1</option>
<option value="lien2">Style 2</option>
</select>

05/12/2008, 11h01
yakusa77

Jai essayer, alors ca marche quand je viens de charger la page je clique et ca me charge le css mais aprés je ne peux plus revenir en arrière pourtant j'ai rajouter sur la même logique :

Citation:

<select onchange="changeStyle(this.value)">
<option value="skin1">Style 1</option>
<option value="skin2">Style 2</option>
</select>

<link rel="stylesheet" href="style.css" id="skin1" />
<link rel="stylesheet" href="style2.css" id="skin2" />

</form>

et aussi

Citation:

function changeStyle(lien)
{
document.getElementById('skin1').href= lien ;
document.getElementById('skin2').href = lien;

}

Merci

Non, il ne faut qu'une feuille de style !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<link rel="stylesheet" href="style.css" id="skin1" />
<script type="text/javascript">
function changeStyle(lien)
{
document.getElementById('skin1').href= lien ;
}
</script>
</head>
<body>
<select onchange="changeStyle(this.value)">
<option value="style.css">Style 1</option>
<option value="style2.css">Style 2</option>
</select>
</body>

05/12/2008, 11h11
yakusa77

Oui mais aprés je peux pas retourner a celle d'avant.
Je voudrais proposer les deux.
Enfin la premiere qui se charge au début et une deuxieme puis pouvoir interchanger les 2.
Dans tes explications je charge la deuxieme puis je ne peux plus rien faire .
05/12/2008, 11h14
yakusa77

Jai trouver enfaite je ne mettait pas la bonne valeur il faut mettre le liens je donner un autre id !!
Merci pour ton aideeeee :D:D:D:yaisse2:
05/12/2008, 11h15
SpaceFrog

sujet déja traité dans les contribtions ou FAQ ....

Fuseau horaire GMT +2. Il est actuellement 06h57.