HTMLElement: versteckte Eigenschaft

Dieses Attribut kann einen von drei Werten haben:

true

Das Element ist verborgen.

false

Das Element ist nicht verborgen. Dies ist der Standardwert des Attributs.

"until-found"

Das Element ist verborgen, bis es gefunden wird, was bedeutet, dass es versteckt ist, aber enthüllt wird, wenn es durch eine Seitensuche gefunden oder durch Fragmentnavigation erreicht wird.

Details zur Verwendung dieses Attributs finden Sie auf der Seite für das hidden HTML-Attribut, auf das sich diese Eigenschaft bezieht.

Hier ist ein Beispiel, bei dem ein versteckter Block verwendet wird, um eine „Danke“-Nachricht zu enthalten, die angezeigt wird, nachdem ein Benutzer einer ungewöhnlichen Anfrage zugestimmt hat.

Das HTML enthält zwei Bereiche: ein Willkommenspanel, das die Benutzer fragt, ob sie großartig sein möchten, und ein Folgepanel, das anfänglich versteckt ist.

<div id="welcome" class="panel">
  <h1>Welcome to Foobar.com!</h1>
  <p>By clicking "OK" you agree to be awesome today!</p>
  <button class="button" id="okButton">OK</button>
</div>

<div id="awesome" class="panel" hidden>
  <h1>Thanks!</h1>
  <p>Thanks for agreeing to be awesome today!</p>
</div>

Der Inhalt wird mit dem folgenden CSS gestaltet.

.panel {
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
  border: 1px solid #22d;
  padding: 12px;
  width: 500px;
  text-align: center;
}

.button {
  font:
    22px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
  padding: 5px 36px;
}

h1 {
  margin-top: 0;
  font-size: 175%;
}

Das JavaScript fügt einen Event-Listener zum "OK"-Button hinzu, der das "Willkommen"-Panel ausblendet und das "Großartig"-Panel anzeigt:

document.getElementById("okButton").addEventListener(
  "click",
  () => {
    document.getElementById("welcome").hidden = true;
    document.getElementById("awesome").hidden = false;
  },
  false,
);

• hidden Attribut
• display