Discussion :

[lethyss]

Bonjour,
Tout d'abord je tiens à prévenir que j'ai pas fait de recherche sur le forum car je ne sais pas quoi chercher...
Donc j'ai fait un petit explorateur de fichiers en "ajax" que vous pouvez trouver ici : http://webeleve.ensmp.fr/~06quehan/nv.php . Je suis débutant total en javascript (le script que je vous montre est en grande partie pompé ailleurs) (et débutant tout court pour le reste) et je ne comprends simplement pas pourquoi la premiere fois que je clique sur un lien, je dois double-cliquer pour dérouler l'arbre alors qu'apres un simple clic suffit. Accessoirement, je ne comprend pas non plus pourquoi l'ascenseur horizontal s'affiche lorsque on déroule la chose...
Merci d'avance pour votre aide !

[Auteur]

bonjour,

ce n'est pas un double clic... Il faut en fait réaliser 2 fois un simple clic sur l'élément.

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
 
function change(id){
	var d = document.getElementById(id);
	var ds = document.getElementById(id+'s');
	if(d){
		if(d.style.display == 'block'){
			d.style.display = 'none';
			ds.style.display = 'block';
		}
		else {
			d.style.display = 'block';
			ds.style.display = 'none';
		}
	}
}

La syntaxe

Code :

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

1
2
element.style.attribut

ne permet pas d'accèder aux informations définies dans la CSS, mais aux informations définies dans l'attribut style des balises, par exemple :

Code html :

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

1
2
3
4
 
<div style="display: block; color:#AAAAAA; border: 1px solid #AAAAAA">
bla bla bla bla bla bla 
</div>

Il faut savoir que si tu définis pour un élément dans la feuille de style ceci :

Code css :

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

1
2
 
display: none; // ou block

ton code javascript

Code javascript :

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

1
2
 
d.style.display

ne renverra.... rien : ni "block" ni "none" (ou une autre valeur de l'attribut display). Fais un alert(d.style.display) juste avant la condition

Dans ce cas la condition

Code javascript :

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

if (d.style.display == 'block')

est fausse donc le else est appliqué (qui est visiblement le style par défaut de tes éléments) :

Code javascript :

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

1
2
3
 
	d.style.display = 'block';
        ds.style.display = 'none';

c'est pour ça que lors du 1er clic "rien de se passe". Mais tu attribues une valeur à display (block et none). Tu réalises une "initialisation" de display.

Lors du second clic sur le même élément les valeurs de display sont définies (lors du 1er clic) donc dans ce cas ta condition devient vraie.

Lors du 3ème clic (toujours sur le même élément) les valeurs de display existent toujours, ta condition est fausse, etc...


Le mieux pour éviter ce désagrément :
ajoute une condition à ton if :

Code javascript :

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

1
2
 
if(d.style.display == 'block' || d.style.display == '' )

ou initialise l'attribut display en utilisant l'attribut style de tes div et non la CSS.

• pour tes div d
  

  Code html :

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

  1
  2
   
  <div id="d1" style="display: block">

• pour tes div ds
  

  Code html :

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

  1
  2
   
  <div id="d1s" style="display: none">

[FremyCompany]

il y a aussi obj.currentStyle qui renvoie le style avec les CSS

Code :

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

if(d.currentStyle.display == 'block' || d.currentStyle.display == '' )

[Auteur]

il y a aussi obj.currentStyle qui renvoie le style avec les CSS

Uniquement valable pour IE...

Pour Firefox, il faut passer par getAttribute (qui n'est pas reconnue par IE).
Par contre pour Opéra, je ne sais pas

[FremyCompany]

Je viens de tester et ca marche sous FF aussi

[Auteur]

Je viens de tester et ca marche sous FF aussi

ne marche pas avec la version 1 de Firefox

[FremyCompany]

Sans doute un ajout de la v2.0

[lethyss]

Ok ! Merci beaucoup, j'ai tout compris !

Bonne continuation !

[Auteur]

Sans doute un ajout de la v2.0

oui, sans doute

[SpaceFrog]

tiens je ne connaissait pas ce currentSytle ...

Pratique pour accéder au style css
à noter qu'il retourne le style par défaut de l'objet si rien n'est indiqué ...

par exemple sur un select il retourne un width auto ...