diff options
Diffstat (limited to 'files/fr/web/api/htmlelement/hidden/index.html')
| -rw-r--r-- | files/fr/web/api/htmlelement/hidden/index.html | 145 |
1 files changed, 145 insertions, 0 deletions
diff --git a/files/fr/web/api/htmlelement/hidden/index.html b/files/fr/web/api/htmlelement/hidden/index.html new file mode 100644 index 0000000000..28cc5255d5 --- /dev/null +++ b/files/fr/web/api/htmlelement/hidden/index.html @@ -0,0 +1,145 @@ +--- +title: HTMLElement.hidden +slug: Web/API/HTMLElement/hidden +translation_of: Web/API/HTMLElement/hidden +--- +<div> +<div>{{ APIRef("HTML DOM") }}</div> +</div> + +<p><span class="seoSummary">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.</span> 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>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" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox notranslate"><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" name="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 notranslate">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 notranslate"><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 notranslate"><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 notranslate">.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> + +<div class="hidden">La table compatibilité de cette page est générée à partir de données structurées. Au cas où vous souhaiteriez contribuer aux données, merci de please de vous regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et de nous envoyer une "pull request".</div> + +<p>{{Compat("api.HTMLElement.hidden")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Element.hidden")}}</li> + <li>{{cssxref("display")}}</li> +</ul> |