Discussion :

[Astumap]

Salut à tous,

Le débutant que je suis viens faire appel à vos lumières.

J'ai créé sur l'intranet de mon travail un second thème en css.
J'ai récupéré un bouton switch dont le design me convient bien.

Code html :

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

1
2
3
4
5
6
7
8
<link rel="stylesheet" type="text/css" href="styledev.css" id="clair" />
<link rel="alternate stylesheet" type="text/css" href="darkstyledev.css" id="sombre" />
 
 
<label class="switch">
  <input type="checkbox" name="theme" id="theme"> 
  <span class="slider round" onclick="changetheme('darkstyledev.css')"></span>
</label>

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
<script>
function changetheme(style){
 
var bouton = (theme.checked);
 
if (bouton === true){
document.getElementById("sombre").setAttribute("href", style);
} else 
document.getElementById("clair").setAttribute("href", style);
}
</script>

Mon script actuel fonctionne partiellement, c'est-à-dire que lorsque je clique sur le switch, le changement de style s'opère bien.
Mais j'aimerais pouvoir revenir au précédent style en "déswitchant" !

Je pense que mon problème vient du fait que j'appelle dans le onclick le paramètre de la fonction qui définit l'un des deux styles.
Et là je suis bloqué, je ne trouve pas de solution. Pourriez-vous me mettre sur la voie ?

Merci par avance !

[Astumap]

J'ai tenté un truc comme ça, mais ça ne fonctionne pas. Je m'y perds...

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
bouton = (theme.checked);
 
function style1(style){
if (bouton === false){
document.getElementById("clair").setAttribute("href", style);
}
}
 
function style2(style){
if (bouton === true){
document.getElementById("sombre").setAttribute("href", style);
}
}
</script>

Code html :

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

1
2
3
4
<label class="switch">
  <input type="checkbox" name="theme" id="theme"> 
  <span class="slider round" onclick="style1('styledev.css'),style2('darkstyledev.css')"></span>
 </label>

[NoSmoking]

Bonjour,
il y aurait bien des choses à dire mais restons sur l'essentiel.

Il te faut mettre la gestion de l'événement sur l'<input> et pas ailleurs.

Code html :

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

1
2
3
4
<label class="switch">
  <input type="checkbox" name="theme" id="theme" onclick="changeTheme(this)"> 
  <span class="slider round"></span>
</label>

dans la fonction changeTheme, le paramètre passé, this, est en fait l'<input> lui même, il te suffit donc de surveiller son état et d'agir en conséquence.

Code :

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

1
2
3
4
function changeTheme(obj) {
  const etatBouton = obj.checked;
  alert("état : " + etatBouton)
}

[Astumap]

Bonjour et merci pour ton aide,

J'avais mis le onclick dans le span

Bon j'ai revu mon script et aussi j'ai supprimé ma balise link alternative qui m'induisait en erreur !

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
<script>
function changeTheme(obj) {
  const etatBouton = obj.checked;
if (etatBouton === true){
document.getElementById("style").setAttribute("href", "darkstyledev.css");
} else {
document.getElementById("style").setAttribute("href", "styledev.css");
}
}
</script>

Code html :

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

<link rel="stylesheet" type="text/css" href="styledev.css" id="style" />

Ca fonctionne impec ! Merci !