javascript et la propriete display

**Auteur** · 24/12/2005, 22h43

bonsoir,

voici 2 exemples indépendants. Ce problème apparaît sous IE et FF (et sans doute sur les autres navigateurs).

1er exemple : le style display est défini dans la partie <style></style>

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
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
li{
cursor: pointer;
}
 
.SousMenu{
display: none;
}
//-->
</style>
 
<script type="text/javascript">
<!--
function GestionMenu(objet){
 var objetFils = "Sous"+objet.id;
 var elmt =  document.getElementById(objetFils);
 
 alert("style.display= "+elmt.style.display);
 
 if (elmt.style.display=="none")
    elmt.style.display = "block";
 else
    elmt.style.display = "none";
 
}
 
//-->
</script>
 
</head>
 
<body>
<ul>
<li id="Menu1"onclick="GestionMenu(this)">Menu 1</li>
    <ul id="SousMenu1" class="SousMenu">
    <li>Sous menu11</li>
    <li>Sous menu12</li>
    <li>Sous menu13</li>
    </ul>
<li id="Menu2" onclick="GestionMenu(this)">Menu 2</li>
    <ul id="SousMenu2" class="SousMenu">
    <li>Sous menu21</li>
    <li>Sous menu22</li>
    <li>Sous menu23</li>
    </ul>
</ul>
 
</body>
 
</html>

2ème exemple
le style display est défini dans les balises ul concernées :

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
<html>
<head>
<title></title>
<style type="text/css">
<!--
li{
cursor: pointer;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
function GestionMenu(objet){
 var objetFils = "Sous"+objet.id;
 var elmt =  document.getElementById(objetFils);
 
 alert("style.display= "+elmt.style.display);
 
 if (elmt.style.display=="none")
    elmt.style.display = "block";
 else
    elmt.style.display = "none";
 
}
 
//-->
</script>
 
</head>
 
<body>
<ul>
<li id="Menu1"onclick="GestionMenu(this)">Menu 1</li>
    <ul id="SousMenu1" style="display: none">
    <li>Sous menu11</li>
    <li>Sous menu12</li>
    <li>Sous menu13</li>
    </ul>
<li id="Menu2" onclick="GestionMenu(this)">Menu 2</li>
    <ul id="SousMenu2"  style="display: none">
    <li>Sous menu21</li>
    <li>Sous menu22</li>
    <li>Sous menu23</li>
    </ul>
</ul>
 
</body>
 
</html>

Lors du 1er clic sur Menu1 ou Menu2 peut-on me dire pourquoi dans l'exemple 1 style.display="" (alors qu'il défini comme none). Il eut été logique que style.display="none" s'affichât, mais ce n'est pas le cas. Par conséquent, dans l'exemple 1, je dois attendre le second clic sur Menu1 ou Menu2 pour le test du display soit pris en compte.
Quelqu'un a une idée??

PS: il est vrai que je peux modifier la condition pour le script de l'exemple 1 fonctionne normalement, mais ce n'est pas ce qui m'intéresse.

**siddh** · 25/12/2005, 08h48

tout simplement car tu as mis SousMenu au lieu de SousMenu1 dans ton style

**Auteur** · 26/12/2005, 10h03

j'ai défini une classe SousMenu :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<style type="text/css">
<!--
li{
cursor: pointer;
}
 
.SousMenu{
display: none;
}
//-->
</style>

et mon code html :

Code :

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

1
2
3
4
5
6
<li id="Menu1"onclick="GestionMenu(this)">Menu 1</li>
    <ul id="SousMenu1" class="SousMenu">
    <li>Sous menu11</li>
    <li>Sous menu12</li>
    <li>Sous menu13</li>
    </ul>

il n'y donc rien d'illogique. L'id est utilisé dans le script

**siddh** · 26/12/2005, 10h31

oups j avais pas fais gaffe a ta classe, effectivement c est etrange ce comportement, faut passer par le style réel

Code :

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

1
2
3
4
5
var elmt =  document.getElementById(objetFils);
if(elmt.currentStyle)
	alert("style.display= "+elmt.currentStyle.display);
 else
	 alert("style.display= "+window.getComputedStyle(elmt, '').getPropertyValue("display"));

**Auteur** · 28/12/2005, 10h39

merci siddh.

Après quelques recherches

Code :

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

elmt.currentStyle

serait pour IE et

Code :

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

window.getComputedStyle(elmt, '').getPropertyValue("display")

pour les autres navigateurs.
Pour une fois IE fait simple

J'ai également recueilli ce commentaire

Les propriétés element.style.* sont destinées à contenir uniquement les valeurs pour les styles en-ligne (balise style="…")

Pour simplifier le code JS, il serait tentant de définir des styles (ceux que l'on souhaite modifier) avec la balise style puis définir les autres styles dans le CSS. Mais le code HTML ne serait sans doute pas très élégant

**Auteur** · 28/12/2005, 10h48

pour ceux que cela intéresse voici un tableau des compatibilités :
http://www.quirksmode.org/dom/w3c_css.html

javascript et la propriete display

JavaScript

Discussions similaires

Partager

Partager