Discussion :

[AlLebnani]

Bonjour j'ai pour projet de réaliser un bouton à deux état celui ci étant déjà fait et fonctionnel en css néanmoins je souhaite que ce bouton lorsque je clique dessus il change de style de css(lorsque le site a le style il passe au style2 et vice-versa) dans ce cas j'ai un style.css et un style2.css j'ai réalisé 2 scripts qui ne fonctionnent pas et je n'arrive pas à les corriger
dans un premier temps j'ai réalisé ça.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
		 document.getElementById("replaceonclicktest").onclick =function changementdestyle(){
		 var css = document.getElementById("linkcss").href;
		 var etat = css.endsWith("style.css");
		 if(etat==true){
			 	document.getElementById("linkcss").setAttribute("href", "style2.css");
			 }
		 } else {
			 document.getElementById("linkcss").setAttribute("href", "style.css");
		   }
		 }
</script>

Celui ci étant non fonctionnel j'ai donc réalisé celui là.

Code :

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
 
	<script type="text/javascript">
		var cpt = 0;
		document.getElementById("replaceonclicktest").onclick =function changementdestyle()
		{
		 	var cpt = ++cpt;
			alert(cpt);
			if(cpt%2 == 0){
				document.getElementById("linkcss").setAttribute("href", "style2.css");
				alert("pair");
			} else {
				document.getElementById("linkcss").setAttribute("href", "style.css");
				alert("impair");
			}
		}
	</script>

Merci de m'avoir lu, si une âme charitable pourrait m'éclairer.
Merci d'avance.

PS:Je suis nouveau sur le forum si mon sujet n'est pas dans la bonne rubrique merci de me l'indiquer.

[Beginner.]

Salut,

Je pense que tu t'es compliqué les choses, au lieu d'utiliser deux feuilles de styles tu devrais utiliser deux class dans une seule feuille de style...

Par exemple (tu peux tester ici : https://playcode.io/196849/v2?tabs=c...ript.js&output) :

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
16
17
18
19
20
21
var monButton = document.getElementById("IDmonButton");
var cp = 0;
 
monButton.addEventListener("click", function() {
 
  // ça c'est juste pour afficher le nombre de clique...
  console.log("clique n°"+ cp++);
 
  if (monButton.classList.contains("etat1")) {
    monButton.classList.remove("etat1");
    monButton.classList.add("etat2");
    // cette ligne c'est en plus pour changer le texte...
    monButton.textContent = "Mon button : Etat2"
 
  } else if (monButton.classList.contains("etat2")) {
    monButton.classList.remove("etat2");
    monButton.classList.add("etat1");
    // cette ligne c'est en plus pour changer le texte...
    monButton.textContent = "Mon button : Etat1"
  }
});

Code html :

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

<button id="IDmonButton" class="etat1">Mon button : Etat1</button>

Avec le css des deux états (que tu peux changer pour y mettre ce que tu veux) :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
.etat1 {
  color: green;
  height: 30px;
  width: 133px;
}
 
.etat2 {
  color: red;
  height: 90px;
  width: 110px;
}

[AlLebnani]

Bonsoir, merci de vous être donné tant de mal pour me répondre, c'est très gentil de votre part mais notre professeur veut absolument deux feuilles de styles différentes et un changement de style par un bouton. Si vous avez une idée qui me le permettrait, je suis preneur. Merci d'avance.

[Beginner.]

Je ne suis pas sûr de comprendre la question du coup...

Et les deux styles ce n'est pas pour changer le style du bouton alors mais c'est pour changer le style de la page html, c'est ça ?

En fait dis-moi si j'ai bien compris cette fois-ci : tu as une page html qui contient entre autres un bouton et ce bouton sert à passer de la feuille de style "style1.css" à "style2.css" et vice-versa ?

[Beginner.]

Bon supposons que ta réponse soit oui alors j'ai testé le code ci-après et cela fonctionne bien chez moi...
Je suis parti de ton code, j'ai fait des ajouts et des modifications...

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
var buttonChangeStyle = document.getElementById("replaceonclicktest");
buttonChangeStyle.onclick = function changementdestyle() {
 
    var baliseLink = document.getElementById("linkcss");
    var etat = baliseLink.href.endsWith("style1.css");
 
    if (etat == true) {
        baliseLink.setAttribute("href", "style2.css");
        buttonChangeStyle.textContent = "style2.css"
    } else {
        baliseLink.setAttribute("href", "style1.css");
        buttonChangeStyle.textContent = "style1.css"
    }
}

Attention : ici j'ai supposé que style1.css et style2.css étaient dans le même répertoire que la page html ce qui mous évite de mettre le chemin complet des deux fichiers mais si tu veux traiter la question d'une manière plus générale avec n'importe quel chemin alors il faudra ajouter des choses...

[NoSmoking]

Bonjour,
il existe également les feuilles de style alternatives, rel="alternate stylesheet", qui s’intègrent de la façon suivante dans une page

Code html :

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

1
2
3
4
<link rel="stylesheet" type="text/css" href="CSS0.css" title="">
<link rel="alternate stylesheet" type="text/css" href="css1.css" title="CSS1">
<link rel="alternate stylesheet" type="text/css" href="css2.css" title="CSS2">
<link rel="alternate stylesheet" type="text/css" href="css3.css" title="CSS3">

on notera la présence d'un attribut title pour la prise en compte d'une ou l'autre par script simple qui active/désactive celle de notre choix.

Exemple code :

Code :

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

1
2
3
4
5
6
7
function setActiveStyleSheet(title) {
  var links = document.querySelectorAll('link[rel*="stylesheet"]');
  var i = links.length;
  while (links[--i]) {
    links[i].disabled = links[i].getAttribute('title') !== title;
  }
}

Pour activer une feuille particulier il suffit de faire un appel du type

Code html :

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

1
2
3
4
<button onclick="setActiveStyleSheet('')">Défaut</button>
<button onclick="setActiveStyleSheet('CSS1')">Style 1</button>
<button onclick="setActiveStyleSheet('CSS2')">Style 2</button>
<button onclick="setActiveStyleSheet('CSS3')">Style 3</button>