HTMLElement: inert-Eigenschaft

Baseline 2023

Newly available

Since April 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die HTMLElement-Eigenschaft inert spiegelt den Wert des inert-Attributs des Elements wider. Es handelt sich um einen booleschen Wert, der, wenn er vorhanden ist, den Browser veranlasst, Benutzereingabeereignisse für das Element zu "ignorieren", einschließlich Fokuserereignissen und Ereignissen von unterstützenden Technologien. Der Browser kann auch die Seitensuche und die Textauswahl im Element ignorieren. Dies kann nützlich sein, wenn man Benutzeroberflächen wie Modals erstellt, bei denen der Fokus im sichtbaren Modal "eingeschlossen" werden soll.

Hinweis: Legen Sie keine interaktiven Elemente oder wichtigen Inhalte in Elemente mit dem inert-Attribut, da inerte Inhalte und deren Nachkommen für alle Benutzer weder fokussierbar noch wahrnehmbar sind.

Wert

Ein Boolean, der true ist, wenn das Element inert ist; andernfalls ist der Wert false.

Beispiel

HTML

html
<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

CSS

css
[inert] > * {
  opacity: 0.5;
}

Hinweis: Dieses Attribut führt allein zu keiner visuellen Änderung des Inhalts, wie er im Browser angezeigt wird. Im obigen Beispiel wurde CSS angewendet, sodass alle direkten Nachkommen eines Elements mit dem inert-Attribut halbtransparent dargestellt werden.

Spezifikationen

Specification
HTML Standard
# dom-inert

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch