Collection pour DIV ?

**Bernard Grosdoy** · 28/02/2006, 11h02

Bonjour, afin de les modifier (visibles, invisibles) je voudrais pouvoir acceder par un boucle � tous les elements se situant dans un DIV (identifie par un ID)

Est-ce possible, ou ne puis-je faire l'economie d'identifier tous les �l�ments et changer les propri�t�s pour chacun successivement?

Rd : GetElementById ne me permet pas d'acceder a une colection me semble-t'il

Merci

**SpaceFrog** · 28/02/2006, 11h07

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

var MacollectiondeDIVS=document.getElementById('container').getElementsByTagName('div')

**Bernard Grosdoy** · 28/02/2006, 11h36

Merci pour les fonctions l'utilisation des conbin�es des get

Cependant , je dois laisser une erreur enorme car la longeur de ma collection est 0 ...

Les elements table, tr td, input, select ... sont-ils int�gr�s dans la collection ?

ou est la faute ?

HTML :

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
<DIV id="container"> 
	<table align="center">
	   <tr>
		<td >libelle : </td>
		<td ><input type="text" maxlength="64" size= "30" 
			name="LIB" value="value_libelle"></td>
	  </tr>	
	  <tr>
 
                <td>Libelle2 : </td>
		<td><input type="text" maxlength="64" size= "30"
			name="LIB2" value="LIBELL2"></td>
	   </tr>	
	</table>
</DIV>

Javascript

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

var MacollectiondeDIVS=document.getElementById('container').getElementsByTagName('div')

**SpaceFrog** · 28/02/2006, 11h52

j'avais compris que tu voulais r�cup�rer une collection de div...

� quels �l�ments souhaites tu acc�der ? aux tr aux td ?

remplace div par le type d'element auquel tu souhaites acceder ...

si c'est � tous les �l�ments remplace div par * mais ta collection sera un ramassis d'elements divers ...

**Bernard Grosdoy** · 28/02/2006, 12h13

Merci !
LE code javascript est bien

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

var MacollectiondeDIVS=document.getElementById('container').getElementsByTagName('*')

A priori tous les elements balistiques sont bien pris en compte.

A noter
Dans le cas d'un passge invisible-visible :
Cette propri�t� pass�e sur une table entraine la visibilit�_invisibilit� de l'ensemble inclus (tr, td, input ...).
Dans mon cas pr�cis, il est donc "inutile" de parcourir, il suffit d'identifier la table et de modifier sa propriete a elle seulement
Je reconnais cependant que l'usage redondant div table n'est pas g�nial.

un autre �l�ment cependant � prendre en compte :
Sous mozilla , mais pas sous ie, un element pass� � invisible, puis visible semble "perdre" ses autres attributs ==> mise en page d�structur�e.

Si je ne switche que la table, il n'y a que la balise Table qui perd ses attributs (largeurs...)

Merci

**Resyek** · 28/02/2006, 13h33

J'ai l'impression que ce que tu cherches � faire, c'est un affichage de type "onglet". Ta page poss�de x blocs d'informations, tu n'en affiches qu'un � la fois, les x-1 autres �tant invisibles (display=none).

J'utilise une fonction trouv�e sur Internet, c'est tr�s pratique.
Tout r�side dans le "nommage" de tes �l�ments : il faut que ce soit monNomElementi.
Dans mon cas, la fonction "montre" sert � deux choses:
1/ Masquer toutes les DIV et afficher celle dont j'ai besoin.
2/ Changer le style de l'onglet en lui m�me.

Tu peux mettre ce "switch" sur une listbox, et virer ainsi tout ce qui concerne le changement de style des onglets.

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
/* Gestion de l'affichage des onglets. */
function montre(id) {
 
var d = document.getElementById(id);
var li_d = document.getElementById("li_"+id);
 
for (var i = 1; i<=3; i++) {
	if (document.getElementById('onglet'+i)) {
		document.getElementById('onglet'+i).style.display='none';
	}
 
	if (document.getElementById('li_onglet'+i)) {
		document.getElementById('li_onglet'+i).setAttribute("class","false");
		document.getElementById('li_onglet'+i).setAttribute("className","false");
	}
}
 
	 d.style.display='block';
 
	 /* Pour les vrais browsers ;-) */
	 li_d.setAttribute("class","true");
	 /* Pour IE */
	 li_d.setAttribute("className","true");	 
 
 
}

La d�finition des "onglets" (que l'on peut cliquer pour changer de DIV affich�)

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
		<DIV class="onglet">
		<ul>
			<LI onclick="javascript:montre('onglet1');" id="li_onglet1" class="true">
				<html:link href="#">
				<fmt:message>donneesGenerales</fmt:message>
				</html:link>
			</LI>
			<LI onclick="javascript:montre('onglet2');" id="li_onglet2" class="false">
				<html:link href="#">
				<fmt:message>modifPays</fmt:message>
				</html:link>
			</LI>
			<LI onclick="javascript:montre('onglet3');" id="li_onglet3" class="false">
				<html:link href="#">
				<fmt:message>modifMCC</fmt:message>
				</html:link>
			</LI>
		</ul>
		</DIV>

Et le contenu en lui m�me

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
 
<!-- ONGLET 1 -->		
<DIV id="onglet1">
[Contenu varié et divers....]
</DIV>
 
<!-- ONGLET 2 -->		
<DIV id="onglet2">
[Contenu varié et divers....]
</DIV>
 
<!-- ONGLET 3 -->		
<DIV id="onglet3">
[Contenu varié et divers....]
</DIV>

**Bernard Grosdoy** · 28/02/2006, 14h06

J'ai l'impression que ce que tu cherches � faire, c'est un affichage de type "onglet". Ta page poss�de x blocs d'informations, tu n'en affiches qu'un � la fois, les x-1 autres �tant invisibles (display=none).

Non, non, il s'agit d'un bloc unique d'informations supplementaires visibles, ou a completer ou non en fonction d'un boolean.

Question subsidiaire, vaut-il mieux utilisere display ou visibility ? ( dans le cas ou on n'applique pas de class)

**SpaceFrog** · 28/02/2006, 14h11

tout d�pend de l'effet recherch� ...

un visibility ne fait que masquer l'objet, il reste dans le flux de la page et sa place rester r�sev�e ...

un display none supprime l'objet du flux de la page et l'element suivant du flux vient prendre sa place ...

donc soit tu laisse un blanc (visibility) soit tu vires compl�tement l'objet de la page (display)...

**Bernard Grosdoy** · 28/02/2006, 14h47

Envoy� par SpaceFrog

tout d�pend de l'effet recherch� ...
un visibility ne fait que masquer l'objet, il reste dans le flux de la page et sa place rester r�sev�e ...
un display none supprime l'objet du flux de la page et l'element suivant du flux vient prendre sa place ...
donc soit tu laisse un blanc (visibility) soit tu vires compl�tement l'objet de la page (display)...

merci.

Je fais une derniere remarque pour clore, a propos de repercution de changements d'attributs, continuer necessiterait sans doute un autre post.

Contrairement � ce que j'ai ecrit au d�but de cette discussion pour les DIV il n'est pas besoin non plus d'invoquer la collection pour repercuter la propriete visible-non visible ( mes essais de code ce matin n'�taient pas assez rigoureux ...

)
modifier le display de la balise DIV suffit,
Ceci que l'on utilise display ou bien visibility : tout ce qui est entre les balises prend le m�me style.

Par contre l'utilisation de la collection me servira quand m�me sur autre chose pour trier ...

Merci encore

**SpaceFrog** · 28/02/2006, 15h05

pas forc�ment ...

par exemple :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
<div style='visibility:hidden'>
    <div style='visiblity:visible'>coucou</div>
</div>

comportement pour le moins curieux ...

**Bernard Grosdoy** · 28/02/2006, 17h08

Oui, oui, bien sur

Mais j'essaie d'etre coherent, et dans la mesure o� je manipule fonctionellement et logiquement des Blocs � comportement analogue, je n'utilise et ne modifie la propriete que pour une seule balise ...

sinon, effectivement, on s'arrche vite les cheveux

Collection pour DIV ?

JavaScript

Discussions similaires

Partager

Partager