HTMLElement: hidden-Eigenschaft

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.

Die HTMLElement-Eigenschaft hidden spiegelt den Wert des hidden-Attributs des Elements wider.

Wert

Dieses Attribut kann einen von drei Werten haben:

true: Das Element ist versteckt.
false: Das Element ist nicht versteckt. Dies ist der Standardwert für das Attribut.
"until-found": Das Element ist versteckt bis gefunden, was bedeutet, dass es versteckt ist, aber angezeigt wird, wenn es durch eine Seitensuche gefunden oder durch Fragmentnavigation erreicht wird.

Für Details zur Verwendung dieses Attributs siehe die Seite des hidden-HTML-Attributs, das diese Eigenschaft widerspiegelt.

Beispiele

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

HTML

Das HTML enthält zwei Bereiche: einen Willkommensbereich, der die Benutzer fragt, ob sie großartig sein möchten, und einen Folge-Bereich, der zunächst versteckt ist.

html

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

CSS

Der Inhalt wird mit dem unten stehenden CSS gestylt.

css

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

JavaScript

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

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

Ergebnis

Spezifikationen

Specification
HTML # dom-hidden

Browser-Kompatibilität

Siehe auch

hidden-Attribut
display