[className] Accepte plusieurs classes ?

**hedgehog** · 05/03/2009, 16h13

Bonjour à tous,

J'aurais juste voulu savoir si l'attribut className acceptait plusieurs classes.

ex. :

Code :

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

1
2
 
document.getElementById(id).className = "classe1 classe2";

Car dans mon cas, il ne semble pas l'accepter.

Pouvez-vous me confirmer cela ?

Merci d'avance

**SpaceFrog** · 05/03/2009, 16h27

Ben si ...

Code :

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

1
2
3
4
5
6
7
8
9
10
<style type='text/css'>
.red{background-color:red;}
.green {color:green;}
</style>
 
</head>
 
<body>
<div onmouseover="this.className='red green'">test</div>
</body>

**hedgehog** · 05/03/2009, 16h39

Le soucis est que ma manipulation de classe s'effectue dans une fonction Javascript c'est pourquoi ma demande est spécifique sur l'attribut className, celui-ci accepte-t-il plusieurs classes ?

**E.Bzz** · 05/03/2009, 16h53

Bonjour,
relis bien la réponse de SpaceFrog

A+

**hedgehog** · 05/03/2009, 17h02

Autant pour moi, j'ai lu trop vite

Sauriez-vous me dire pourquoi le deuxième style (classe2) de cette ligne n'est pas traité ?

Code :

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

1
2
 
document.getElementById(id).className = 'classe1 classe2';

**Bovino** · 05/03/2009, 17h04

D'après ce que tu montres comme code, il est impossible de te répondre...
Peut-être y a-t-il des conflits de css, d'héritage ou autre

**SpaceFrog** · 05/03/2009, 19h29

id = ?

**hedgehog** · 06/03/2009, 09h23

id est l'id de l'élément à manipuler (cette modification de la classe intervient dans une fonction à laquelle est passée l'argument id)

**le_chomeur** · 06/03/2009, 09h29

tu as donc un autre élément perturbateur, tu peux nous montrer les deux classes incriminé ?

**hedgehog** · 06/03/2009, 09h46

Voici une partie de la fonction (initialisant les classes) :

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
17
 
switch(type) {
	case 'j' :
		document.getElementById(id + "_j").className = 'congeSelectionne bordureGaucheConge';
		document.getElementById(id + "_dj").className = 'congeSelectionne bordureDroiteConge';
		break;
	case 'jo' :
		document.getElementById(id + "_j").className = 'congeOffert bordureGaucheConge';
		document.getElementById(id + "_dj").className = 'congeOffert bordureDroiteConge';
		break;
	case 'dj' :
		document.getElementById(id + "_j").className = 'jourSaisissable';
		document.getElementById(id + "_dj").className = 'congeSelectionne bordureGaucheConge bordureDroiteConge';
		break;
	default :
		alert("Erreur (objet 'type' incorrect).");
}

et les styles associés :

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
17
18
19
20
 
td.jourSaisissable {
	background-color: transparent;
}
 
td.congeSelectionne {
	background-color:#FFFFFF;
}
 
td.congeOffert {
	background-color:#CCCCCC;
}
 
td.bordureGaucheConge {
	border-left: 1px dotted #000000;
}
 
td.bordureDroiteConge {
	border-right: 1px dotted #000000;
}

**le_chomeur** · 06/03/2009, 09h48

normal ....
tes classe n'affectent que les éléments qui se trouvent dans un td, enlève le td devant le nom de tes classes

**hedgehog** · 06/03/2009, 09h58

Pourtant ce sont bien les classes d'un élément td que je manipule.

De plus les styles, congeSelectionne, congeOffert et jourSaisissable fonctionnent bien.

J'ai quand même essayé d'enlever les td mais les styles ne s'appliquent toujours pas.

**E.Bzz** · 06/03/2009, 10h00

Type n'a pas un style="" défini dans le tag HTML ?
Si oui il serait prioritaire sur les class ...

A+

**le_chomeur** · 06/03/2009, 10h03

+1 ebzz

**hedgehog** · 06/03/2009, 10h21

type n'est pas l'id d'un élément html mais juste une variable permettant d'identifier le cas à traiter.

**SpaceFrog** · 06/03/2009, 10h25

on peut voir le html ??? les balises en question avec leur id et tout ...

sinon rajoute

Code :

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

 !important

au bout du className

**hedgehog** · 06/03/2009, 10h29

Pas de soucis, voici une partie du code interprété (PHP) :

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
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
51
52
53
54
55
56
 
<tr>
<td id="2009-1-1_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-1_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-2_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-2_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td width="16" colspan="2" class="weekEnd">&nbsp;</td>
<td width="16" colspan="2" class="weekEnd">&nbsp;</td>
<td id="2009-1-5_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-5_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-6_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-6_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-7_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-7_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-8_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-8_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-9_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-9_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td width="16" colspan="2" class="weekEnd">&nbsp;</td>
<td width="16" colspan="2" class="weekEnd">&nbsp;</td>
<td id="2009-1-12_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-12_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-13_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-13_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-14_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-14_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-15_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-15_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-16_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-16_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td width="16" colspan="2" class="weekEnd">&nbsp;</td>
<td width="16" colspan="2" class="weekEnd">&nbsp;</td>
<td id="2009-1-19_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-19_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-20_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-20_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-21_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-21_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-22_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-22_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-23_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-23_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td width="16" colspan="2" class="weekEnd">&nbsp;</td>
<td width="16" colspan="2" class="weekEnd">&nbsp;</td>
<td id="2009-1-26_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-26_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-27_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-27_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-28_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-28_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-29_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-29_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-30_dj" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td id="2009-1-30_j" width="8" class="jourSaisissable" style="cursor:pointer" onclick="selecConge(this.id,'')">&nbsp;</td>
<td width="16" colspan="2" class="weekEnd">&nbsp;</td>
</tr>