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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
---
title: HTMLElement.hidden
slug: Web/API/HTMLElement/hidden
translation_of: Web/API/HTMLElement/hidden
---
<div>{{ APIRef("HTML DOM") }}</div>
<p>La propriété <strong><code>hidden</code></strong> de l'{{domxref("HTMLElement")}} est un {{jsxref("Boolean")}} qui vaut <code>true</code> si l'élément est caché, sinon sa valeur est <code>false</code>. Cela est très différent de l'utilisation de la propriété CSS {{cssxref("display")}} pour contrôler la visibilité d'un élément.</p>
<p>La propriété <code>hidden</code> s'applique à tous les modes de présentation et ne doit pas être utilisée pour cacher du contenu qui est destiné à être directement accessible par l'utilisateur.</p>
<p>Des cas d'utilisation appropriés de <code>hidden</code> comprennent :</p>
<ul>
<li>du contenu qui n'est pas encore pertinent mais qui peut être nécessaire ultérieurement ;</li>
<li>du contenu qui était nécessaire antérieurement mais qui ne l'est plus ;</li>
<li>du contenu qui est réutilisé par d'autres parties de la page à la manière d'un modèle ;</li>
<li>la création d'un canevas hors écran comme tampon de dessin.</li>
</ul>
<p>Des cas inappropriés d'utilisation comprennent :</p>
<ul>
<li>le fait de cacher des panneaux dans une boîte de dialogue à onglets ;</li>
<li>le fait de cacher du contenu dans une présentation tout en ayant l'intention qu'il soit visible dans d'autres.</li>
</ul>
<div class="note">
<p><strong>Note :</strong> Des éléments qui ne sont pas <code>hidden</code> ne doivent pas faire référence à des éléments qui le sont.</p>
</div>
<h2 id="Syntax">Syntaxe</h2>
<pre class="syntaxbox"><em>estCaché</em> = <em>HTMLElement</em>.hidden;
<em>HTMLElement</em>.hidden = true | false;</pre>
<h3 id="Valeur">Valeur</h3>
<p>Un Boolean qui est <code>true</code> si l'élément est caché à la vue ; sinon, la valeur est <code>false</code>.</p>
<h2 id="Example">Exemple</h2>
<p>Voici un exemple où un bloc caché est utilisé pour contenir un message de remerciement qui est affiché après qu'un utilisateur a accepté une demande inhabituelle.</p>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">document.getElementById("boutonOk")
.addEventListener("click", function() {
document.getElementById("bienvenue").hidden = true;
document.getElementById("impressionnant").hidden = false;
}, false);</pre>
<p>Ce code installe une gestionnaire pour le bouton "OK" du panneau de bienvenue, gestionnaire qui cache le panneau de bienvenue et rend le panneau de suite — ayant le curieux nom d'"impressionnant" — visible à sa place.</p>
<h3 id="HTML">HTML</h3>
<p>Le code HTML pour les deux boîtes est montré ci-dessous.</p>
<h4 id="Le_panneau_bienvenue">Le panneau bienvenue</h4>
<pre class="brush: html"><div id="bienvenue" class="panneau">
<h1>Bienvenue à Machin.com !</h1>
<p>En cliquant sur "OK", vous acceptez d'être impressionnant chaque jour !</p>
<button class="bouton" id="boutonOk">OK</button>
</div></pre>
<p>Ce code HTML crée un panneau (dans un bloc {{HTMLElement("div")}}) qui accueille les utilisateurs sur un site et leur dit ce qu'ils acceptent en cliquant sur le bouton OK.</p>
<h4 id="Le_panneau_de_suite">Le panneau de suite</h4>
<p>Une fois que l'utilisateur a cliqué sur le bouton "OK" dans le panneau d'accueil, le code JavaScript échange les deux panneaux en changeant leurs valeurs respectives pour <code>hidden</code>. Le panneau de suite ressemble à ce qui suit en HTML:</p>
<pre class="brush: html"><div id="impressionnant" class="panneau" hidden>
<h1>Merci !</h1>
<p>Merci <strong>vraiment</strong> beaucoup d'avoir accepté d'être
impressionnant aujourd'hui ! Maintenant, sortez et faites des choses impressionnantes
d'une façon impressionnante pour rendre le monde plus impressionnant !</p>
</div></pre>
<h3 id="CSS">CSS</h3>
<p>Le contenu est mis en forme en utilisant le CSS ci-dessous.</p>
<pre class="brush: css">.panneau {
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
border: 1px solid #22d;
padding: 12px;
width: 500px;
text-align: center;
}
.bouton {
font: 22px "Open Sans", Helvetica, Arial, sans-serif;
padding: 5px 36px;
}
h1 {
margin-top: 0;
font-size: 175%;
}</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{ EmbedLiveSample('Example', 560, 200) }}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaire</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', "interaction.html#dom-hidden", "HTMLElement.hidden")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("api.HTMLElement.hidden")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{domxref("Element.hidden")}}</li>
<li>{{cssxref("display")}}</li>
</ul>
|
