HTMLElement.hidden
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
La propriété hidden
de l'HTMLElement
est un Boolean
qui vaut true
si l'élément est caché, sinon sa valeur est false
. Cela est très différent de l'utilisation de la propriété CSS display
pour contrôler la visibilité d'un élément.
La propriété hidden
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.
Des cas d'utilisation appropriés de hidden
comprennent :
- du contenu qui n'est pas encore pertinent mais qui peut être nécessaire ultérieurement ;
- du contenu qui était nécessaire antérieurement mais qui ne l'est plus ;
- du contenu qui est réutilisé par d'autres parties de la page à la manière d'un modèle ;
- la création d'un canevas hors écran comme tampon de dessin.
Des cas inappropriés d'utilisation comprennent :
- le fait de cacher des panneaux dans une boîte de dialogue à onglets ;
- le fait de cacher du contenu dans une présentation tout en ayant l'intention qu'il soit visible dans d'autres.
Note : Des éléments qui ne sont pas hidden
ne doivent pas faire référence à des éléments qui le sont.
Syntaxe
estCaché = HTMLElement.hidden;
HTMLElement.hidden = true | false;
Valeur
Un Boolean qui est true
si l'élément est caché à la vue ; sinon, la valeur est false
.
Exemple
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.
JavaScript
document.getElementById("boutonOk").addEventListener(
"click",
function () {
document.getElementById("bienvenue").hidden = true;
document.getElementById("impressionnant").hidden = false;
},
false,
);
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.
HTML
Le code HTML pour les deux boîtes est montré ci-dessous.
Le panneau bienvenue
<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>
Ce code HTML crée un panneau (dans un bloc <div>
) qui accueille les utilisateurs sur un site et leur dit ce qu'ils acceptent en cliquant sur le bouton OK.
Le panneau de suite
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 hidden
. Le panneau de suite ressemble à ce qui suit en 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>
CSS
Le contenu est mis en forme en utilisant le CSS ci-dessous.
.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%;
}
Résultat
Spécifications
Specification |
---|
HTML Standard # dom-hidden |
Compatibilité des navigateurs
BCD tables only load in the browser