[className] Accepte plusieurs classes ?

Version imprimable

05/03/2009, 16h13
hedgehog

[className] Accepte plusieurs classes ?
Bonjour à tous,

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

ex. :
Code:

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 ;)

Ben si ...

Code:

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>

05/03/2009, 16h39
hedgehog

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 ?
05/03/2009, 16h53
E.Bzz

Bonjour,
relis bien la réponse de SpaceFrog ;)

A+
05/03/2009, 17h02
hedgehog
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:

1 2 document.getElementById(id).className = 'classe1 classe2';
05/03/2009, 17h04
Bovino

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 :?
05/03/2009, 19h29
SpaceFrog

id = ?
06/03/2009, 09h23
hedgehog

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)
06/03/2009, 09h29
le_chomeur

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

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

Code:

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:

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;
}

06/03/2009, 09h48
le_chomeur

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
06/03/2009, 09h58
hedgehog

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.
06/03/2009, 10h00
E.Bzz

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

A+
06/03/2009, 10h03
le_chomeur

+1 ebzz
06/03/2009, 10h21
hedgehog

type n'est pas l'id d'un élément html mais juste une variable permettant d'identifier le cas à traiter.
06/03/2009, 10h25
SpaceFrog

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

sinon rajoute

Code:

!important

au bout du className

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

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
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>

06/03/2009, 10h30
SpaceFrog

et donc tu passes
id="2009-1-1" par exemple ?
06/03/2009, 10h33
hedgehog

Oui, exactement.
06/03/2009, 10h50
SpaceFrog

heu ben tu passes this.id en param de selecConges

a mon avis il y a emmèlage de crayons entre type et id ...
06/03/2009, 11h01
hedgehog

En fait, je passe par une fonction intermédiaire donc tout est ok niveau fonctionnement.

Tout se déroule correctement à part l'application des styles supplémentaires.
06/03/2009, 11h14
E.Bzz

Ton include cible bien le bon .css :koi:

:aie:
06/03/2009, 11h14
hedgehog

Oui oui :)

Sinon les autres styles ne s'appliqueraient pas.
06/03/2009, 11h15
le_chomeur

et pour le style ?
06/03/2009, 11h18
hedgehog

le style ?
06/03/2009, 11h19
E.Bzz

@ le_chom : seul le curseur y est défini ...

A+