Cacher plusieurs balises au chargement de la page

Version imprimable

07/10/2016, 12h54
nanar21

Cacher plusieurs balises au chargement de la page
Bonjour,

Pour cacher un élément (une balise aside ayant comme id="today"), ce code fonctionne

Code:

document.getElementById("today").style.display="none"; // OK

Mais pour cacher toutes les balises aside, ce code ne fonctionne pas

Code:

document.getElementsByTagName("aside").style.display="none";

J'ai tenté le code suivant, (mais il ne fonctionne pas)
Code:

1 2 var tab_aside=document.getElementsByTagName("aside"); for (x in tab_aside) { x.style.display="none";}
Pourriez-vous m'aider ?
Je voudrais cacher plusieurs balises d'un coup au chargement de la page

D'avance merci
07/10/2016, 17h35
Beginner.

Tu as des balises <aside></aside> dans ton html ? Je ne sais pas si c'est une bonne idée mais peut-être que ce serait mieux de travailler avec des balises connues et ajouter par exemple une class ".aside"...

Je ne sais pas si on peut appliquer du css classique à une balise inconnue juste comme ça sans ajouter quelque chose (j'ai vu qu'on pouvait faire des balises personnalisées)...

Bonjour,
Code:

1 2 var tab_aside = document.getElementsByTagName("aside"); for (var i = 0; i < tab_aside.length; i++) { tab_aside[i].style.display="none"; }
ou :
Code:

1 2 var tab_aside = document.getElementsByTagName("aside"); for (x of tab_aside) { x.style.display="none"; }
Voir for(... of ...) (et pas for(...in...))

Pour peu que tu utilises jQuery, ça devient :

Code:

$('aside').hide();

07/10/2016, 17h49
Beginner.

Ah je viens de tester et oui apparemment on peut utiliser n'importe quelles balises ! Je ne savais pas ça...
07/10/2016, 17h52
Invité
@Beginner.

La balise <aside> EST BIEN une balise HTML5 !
- HTML5 : le guide du débutant
07/10/2016, 17h57
Beginner.

Ah merci, je ne la connaissais pas ! Ceci dit j'ai essayé aussi <asidea> et ça marche aussi sauf qu'elle est considérée apparement comme une balise inline...
08/10/2016, 07h09
nanar21

Cacher le contenu de plusieurs balises au chargement de la page
Merci, pour le bon code :
Code:

1 2 var tab_aside = document.getElementsByTagName("aside"); for (var i = 0; i < tab_aside.length; i++) { tab_aside[i].style.display="none"; }
Cela fonctionne avec un for "classique"

Exemple d'utilisation

Cacher le contenu de plusieurs balises au chargement de la page HTML est utile si on veut voir que le titre de plusieurs notes. Par exemple, une page contenant toutes les choses à faire !

Un clic sur un titre et la note s'affiche. Un double-clic sur le contenu de la note et le contenu disparaît.

Voici le code d'une telle page HTML (Le javascript discuté ci-dessus se trouve en bas)

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <style>
    body{ font-family: Verdana, Arial, Helvetica;
     background-color: gray; color: black;}
 
    aside { background-color: #96dc97;
    border-radius: 20px; padding: 5px; margin: 5px;}
    </style>
    <title>
      To do
    </title>
  </head>
  <body>
    <p>
      Cliquez sur le titre pour afficher le contenu.<br>
      Double-cliquez sur le contenu pour le cacher.
    </p>
    <h1 onclick=
    "document.getElementById('today').style.display='block'">
      A faire rapidement
    </h1>
    <aside id="today" ondblclick="style.display='none'">
      <p>
        Le Lorem Ipsum est simplement du faux texte employé dans la
        composition et la mise en page avant impression. Le Lorem
        Ipsum est le faux texte standard de l'imprimerie depuis les
        années 1500.
      </p>
    </aside><!--=========================================-->
    <h1 onclick=
    "document.getElementById('note2').style.display='block'">
      En mathématiques
    </h1>
    <aside id="note2" ondblclick="style.display='none'">
      <ul>
        <li>Apprendre par coeur les tables de multiplication
        </li>
        <li>Tracer une perpendiculaire à l'aide d'une latte et d'un
        compas
        </li>
      </ul>
    </aside><!--=========================================-->
    <h1 onclick=
    "document.getElementById('note3').style.display='block'">
      En Français
    </h1>
    <aside id="note3" ondblclick="style.display='none'">
      <ul>
        <li>Lire "Tintin : Objectif Lune"
        </li>
        <li>Apprendre la dactylographie (taper avec ses dix doigts)
        </li>
      </ul>
    </aside><!--=========================================-->
    <h1 onclick=
    "document.getElementById('note4').style.display='block'">
      Préparation des vacances
    </h1>
    <aside id="note4" ondblclick="style.display='none'">
      <p>
        Mettre dans la valise :
      </p>
      <ul>
        <li>...
        </li>
        <li>...
        </li>
      </ul>
    </aside><!--=========================================-->
    <script type="text/javascript">
        var tab_aside=document.getElementsByTagName("aside");
        for (var i = 0; i < tab_aside.length; i++) { tab_aside[i].style.display="none"; }
    </script>
  </body>
</html>

08/10/2016, 10h28
Invité

Bonjour,

en fait, dans ce cas, il est plus simple d'écrire en CSS :

Code:

aside { display:none;}
09/10/2016, 16h24
nanar21

Exact ! C'est même la meilleure solution. Encore merci.
09/10/2016, 18h29
NoSmoking

Bonjour,
pour moi ce qui est affiché par javascript doit être masqué par javascript.