HTMLElement.hidden

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.

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

Spécification Statut Commentaire
HTML Living Standard
La définition de 'HTMLElement.hidden' dans cette spécification.
Standard évolutif
HTML 5.1
La définition de 'HTMLElement.hidden' dans cette spécification.
Recommendation
HTML5
La définition de 'HTMLElement.hidden' dans cette spécification.
Recommendation

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
hiddenChrome Support complet 6Edge Support complet 12Firefox Support complet 1IE Support complet 11Opera Support complet 11.6Safari Support complet 6WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 12Safari iOS Support complet 6Samsung Internet Android Support complet 1.0

Légende

Support complet  
Support complet

Voir aussi