Discussion :

[Julien_IM]

Bonjour,

J'aimerais pouvoir changer la feuille de style CSS d'un document html avec une combobox et un bouton. J'ai mes deux feuilles de style "style1.css" et "style2.css".

Voici ma fonction :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function switch_style (css_title) 
{
	var i;
	var link_tag = document.getElementsByTagName("link");
	for (i = 0; i < link_tag.length; i++ ) 
	{
		if ((link_tag[i].rel.indexOf("stylesheet") != -1)) 
		{
		link_tag[i].href = css_title;
		}
	}
}

Et mon code HTML :

Code HTML :

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

1
2
3
4
5
6
7
<label for="choixstyle">Choisir une feuille :</label>
<select name="choixstyle" id="choixstyle" size="1">
	<option value="" >Choisir un style</option>
	<option value="style1">Style1</option>
	<option value="style2">Style2</option>
</select>
<button type="button" onclick="switch_style(css_title)">Switcher</button>

Il faudrait qu'au clic sur Style1 ou Style2 la variable css_title prenne style1.css ou style2.css. Je suis complètement coincé, j'ai lu qu'il fallait utiliser l'évènement onchange avec un select mais je ne vois pas comment me débrouiller.

Merci d'avance pour votre aide.
Cordialement.

[javatwister]

Salut,

De fait, c'est sur onchange que tu pourras enregistrer la nouvelle valeur sélectionnée; donc, supprime ton bouton et ajoute l'appel suivant dans ton select:

Code html :

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

<select name="choixstyle" id="choixstyle" size="1" onchange="switch_style(this.value+'.css')">

je pense que tu peux aussi épurer ta 8e ligne:

Code javascript :

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

if (link_tag[i].rel=="stylesheet")

[Julien_IM]

Merci ça fonctionne bien! Je ne sais pas pourquoi j'ai voulu me casser la tête avec un bouton.