HTMLElement.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'HTMLElement est unBoolean qui vauttrue si l'élément est caché, sinon sa valeur estfalse. Cela est très différent de l'utilisation de la propriété CSSdisplay 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 dehidden 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 pashidden 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 esttrue si l'élément est caché à la vue ; sinon, la valeur estfalse.

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

html

<div>  <h1>Bienvenue à Machin.com !</h1>  <p>En cliquant sur "OK", vous acceptez d'être impressionnant chaque jour !</p>  <button>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 pourhidden. Le panneau de suite ressemble à ce qui suit en HTML:

html

<div 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.

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%;}