Appliquer à un style à "tous, sauf"

Version imprimable

15/07/2007, 12h52
AIexis

Appliquer à un style à "tous, sauf"

Bonjour,
J'aimerais savoir si il est possible d'appliquer un style à tous les éléments, sauf un.
Exemple, j'ai 5 boutons blancs, qui changent de couleur (-> rouge) quand je clique dessus. Je veux qu'il n'y ait toujours qu'un seul bouton rouge.
Au clic, le bouton, disons 1, devient rouge:

Code:

document.getElementById("bouton1").className="button_rouge";

Je voudrais que les autres deviennent blancs

Code:

document.getElementById("tous les boutons sauf le 1").className="button_blanc";

Y'a t'il moyen ?
Merci :)
15/07/2007, 15h56
epsilon68

moi je dirais utilise JQuery,
on peut selectionner un ensemble pour lui changer sa class etc...
15/07/2007, 16h01
AIexis

Ok, merci, je vais regarder ça de près.
15/07/2007, 17h10
AIexis
Bonjour Auteur, et merci pour ton code :)
A priori j'ai fait autre chose, qui fonctionne, à savoir, une fonction qui "blanchi" tous les boutons, et que j'appelle à chaque fois.
Code:

1 2 3 4 5 6 function decocher(){ for(var i=1; i<6; i++){ var b = "bouton" + i ; document.getElementById(b).className="bouton_blanc"; } }
Ensuite, il ne me reste plus qu'à "rougir" le bouton coché, avec la commande citée dans le premier message.
Code:

1 2 3 decocher() ; document.getElementById("bouton1").className="bouton_rouge";
Pas très propre, mais plus court. Pas forcément très rapide (je sais pas trop), mais c'est pas grave.

bonjour,

fais une liste de tes boutons :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 function listerBouton() { var listeInput = document.getElementsByTagName("input"); var listeBoutons = new Array(); var i, j, n; try { n = listeInput.length; j=0; for (i=0; i<n; i++) { if (listeInput[i].type.toLowerCase()=="button") { listeBoutons[j] = listeInput[i]; j++; } } if (j<=0) throw "Erreur.."; } catch(e) { listeBoutons = null; } return listeBoutons; }
puis lorsque tu cliques sur un bouton affecte lui la classe "button_rouge" et aux autres "button_blanc".

[edit]j'ai réédité mon post au moment où tu postait ta réponse pour te proposer une autre solution.... et nos messages se sont croisés :aie: J'ai donc supprimé mon message et reposter mon code. (Pour ceux qui n'ont rien compris à ce j'ai dit : je suis fatigué aujourd'hui :aie: :oops: :mrgreen: )[/edit]

15/07/2007, 17h19
AIexis

Citation:

Envoyé par Auteur

[edit]j'ai réédité mon post au moment où tu postait ta réponse pour te proposer une autre solution.... et nos messages se sont croisés :aie: J'ai donc supprimé mon message et reposter mon code. (Pour ceux qui n'ont rien compris à ce j'ai dit : je suis fatigué aujourd'hui :aie: :oops: :mrgreen: )[/edit]

Non, c'est pas vrai, c'est juste que j'avais deviné que tu allais poster, et j'ai anticipé le merci :lun:

voici donc une autre solution, mémorise le dernier bouton cliqué (cela évite de les lister) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.bouton_blanc{
 background-color : #FFFFFF;
}
.bouton_rouge{
 background-color : #FF0000;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
var oldBtClic = null;//pas de bouton cliquer initialement
 
function changeStyle(bt)
{
  if (oldBtClic!=bt)
  {
    bt.className="bouton_rouge";
    if (oldBtClic!=null)
       oldBtClic.className = "bouton_blanc";
  }
 
  oldBtClic = bt; //memorisation du dernier bouton clique
}
 
 
//-->
</script>
 
</head>
 
<body>
 
<input type="button" value="Bouton 1" class="bouton_blanc" onclick="changeStyle(this)" />
<input type="button" value="Bouton 2" class="bouton_blanc" onclick="changeStyle(this)" />
<input type="button" value="Bouton 3" class="bouton_blanc" onclick="changeStyle(this)" />
<input type="button" value="Bouton 4" class="bouton_blanc" onclick="changeStyle(this)" />
<input type="button" value="Bouton 5" class="bouton_blanc" onclick="changeStyle(this)" />
 
 
</body>
 
</html>

Citation:

Envoyé par Auteur

voici donc une autre solution, mémorise le dernier bouton cliqué (cela évite de les lister) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.bouton_blanc{
 background-color : #FFFFFF;
}
.bouton_rouge{
 background-color : #FF0000;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
var oldBtClic = null;//pas de bouton cliquer initialement
 
function changeStyle(bt)
{
  if (oldBtClic!=bt)
  {
    bt.className="bouton_rouge";
    if (oldBtClic!=null)
       oldBtClic.className = "bouton_blanc";
  }
 
  oldBtClic = bt; //memorisation du dernier bouton clique
}
 
 
//-->
</script>
 
</head>
 
<body>
 
<input type="button" value="Bouton 1" class="bouton_blanc" onclick="changeStyle(this)" />
<input type="button" value="Bouton 2" class="bouton_blanc" onclick="changeStyle(this)" />
<input type="button" value="Bouton 3" class="bouton_blanc" onclick="changeStyle(this)" />
<input type="button" value="Bouton 4" class="bouton_blanc" onclick="changeStyle(this)" />
<input type="button" value="Bouton 5" class="bouton_blanc" onclick="changeStyle(this)" />
 
 
</body>
 
</html>

impec ! :king:
merci encore