HTMLElement : propriété hidden
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La propriété hidden de l'interface HTMLElement reflète la valeur de l'attribut hidden de l'élément.
Valeur
Cet attribut peut avoir l'une des trois valeurs suivantes :
true-
L'élément est caché.
false-
L'élément n'est pas caché. Il s'agit de la valeur par défaut de l'attribut.
"until-found"-
L'élément est caché jusqu'à ce qu'il soit trouvé, c'est-à-dire qu'il est caché mais sera révélé s'il est trouvé via la recherche dans la page ou atteint par navigation de fragment.
Pour plus de détails sur l'utilisation de cet attribut, voir la page de l'attribut HTML hidden auquel cette propriété fait référence.
Exemples
Voici un exemple où un bloc caché est utilisé pour contenir un message de remerciement qui est affiché après qu'un·e utilisateur·ice a accepté une demande inhabituelle.
HTML
Le code HTML contient deux panneaux : un panneau de bienvenue, qui demande aux utilisateur·ice·s d'accepter d'être impressionnant·e·s, et un panneau de suite, qui est initialement caché.
<div id="bienvenue" class="panneau">
<h1>Bienvenue sur mon site !</h1>
<p>
En cliquant sur « OK », vous acceptez d'être impressionnant·e
aujourd'hui !
</p>
<button class="bouton" id="boutonOk">OK</button>
</div>
<div id="impressionnant" class="panneau" hidden>
<h1>Merci !</h1>
<p>Merci d'avoir accepté d'être impressionnant·e aujourd'hui !</p>
</div>
CSS
Le contenu est mis en forme avec le CSS ci-dessous.
.panneau {
font:
16px "Open Sans",
"Helvetica",
"Arial",
sans-serif;
border: 1px solid #2222dd;
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%;
}
JavaScript
Le JavaScript ajoute un gestionnaire d'évènement au bouton « OK », qui cache le panneau « bienvenue » et affiche le panneau « impressionnant » :
document.getElementById("boutonOk").addEventListener("click", () => {
document.getElementById("bienvenue").hidden = true;
document.getElementById("impressionnant").hidden = false;
});
Résultat
Spécifications
| Specification |
|---|
| HTML # dom-hidden |