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

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>

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:

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.

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

Résultat

Spécifications

Specification
HTML Standard # dom-hidden

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

Element.hidden
display