Collection pour DIV ?

Version imprimable

28/02/2006, 12h02
Bernard Grosdoy

Collection pour DIV ?

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
28/02/2006, 12h07
SpaceFrog

Code:

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

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:

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:

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

28/02/2006, 12h52
SpaceFrog

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 ...
28/02/2006, 13h13
Bernard Grosdoy

Merci !
LE code javascript est bien

Code:

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

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:

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:

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15  <DIV id="onglet1"> [Contenu varié et divers....] </DIV>  <DIV id="onglet2"> [Contenu varié et divers....] </DIV>  <DIV id="onglet3"> [Contenu varié et divers....] </DIV>

28/02/2006, 15h06
Bernard Grosdoy

Citation:

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)
28/02/2006, 15h11
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)...
28/02/2006, 15h47
Bernard Grosdoy

Citation:

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 ... :oops: )
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
28/02/2006, 16h05
SpaceFrog
pas forcément ...

par exemple :
Code:

1 2 3 <div style='visibility:hidden'> <div style='visiblity:visible'>coucou</div> </div>
comportement pour le moins curieux ...
28/02/2006, 18h08
Bernard Grosdoy

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