charger une feuille de style via javascript

**yakusa77** · 04/12/2008, 20h42

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.

**Astartee** · 04/12/2008, 21h16

Tu ferais mieux de poster sur le forum javascript

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 ?

**yakusa77** · 04/12/2008, 21h20

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

**Astartee** · 04/12/2008, 21h33

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 :

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

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

**yakusa77** · 04/12/2008, 22h43

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

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 :

Merci de me répondre...

**Astartee** · 04/12/2008, 23h03

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é ?

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

**yakusa77** · 05/12/2008, 10h53

Oui je viens d'essayer ce que tu as mis ca ne marche pas même en changeant les possibilités guillemets...

**Bovino** · 05/12/2008, 11h12

Essaye :

Code html :

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

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

et

Code :

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

1
2
3
function changeStyle(lien){
    document.getElementById('mon_style').href = lien;
}

En adaptant évidemment ton code pour envoyer les bonnes valeurs !

**yakusa77** · 05/12/2008, 11h32

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

**Astartee** · 05/12/2008, 11h35

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

**Bovino** · 05/12/2008, 11h36

Code :

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

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

**yakusa77** · 05/12/2008, 12h01

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 :

<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

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

}

Merci

**Bovino** · 05/12/2008, 12h08

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

Code html :

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

**yakusa77** · 05/12/2008, 12h11

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 .