HTMLStyleElement: disabled-Eigenschaft

Wert

Gibt true zurück, wenn das Stylesheet deaktiviert ist oder kein zugehöriges Stylesheet vorhanden ist; ansonsten false. Der Standardwert ist false (wenn ein zugehöriges Stylesheet vorhanden ist).

Die Eigenschaft kann verwendet werden, um ein zugehöriges Stylesheet zu aktivieren oder zu deaktivieren. Das Festlegen der Eigenschaft auf true, wenn kein zugehöriges Stylesheet vorhanden ist, hat keinen Effekt.

Beispiele

Ein Inline-Style deaktivieren

Dieses Beispiel demonstriert das programmatische Setzen der deaktivierten Eigenschaft auf einen Stil, der im HTML unter Verwendung des HTML <style>-Elements definiert wurde. Beachten Sie, dass Sie auch auf beliebige oder alle Stylesheets im Dokument über Document.styleSheets zugreifen können.

HTML

Das HTML enthält ein HTML <style>-Element, das Absatz-Elemente blau färbt, ein Absatz-Element und einen Button, der verwendet wird, um den Stil zu aktivieren und zu deaktivieren.

<button>Enable</button>
<style id="InlineStyle">
  p {
    color: blue;
  }
</style>
<p>Text is black when style is disabled; blue when enabled.</p>
<p></p>

JavaScript

Der untenstehende Code holt das style-Element anhand seiner ID und setzt es dann als deaktiviert. Da der Stil bereits existiert, wie er im SVG definiert ist, sollte dies erfolgreich sein.

const style = document.getElementById("InlineStyle");
style.disabled = true;

Wir fügen dann einen Ereignishandler für den Button hinzu, der den disabled-Wert und den Button-Text umschaltet.

const button = document.querySelector("button");

button.addEventListener("click", () => {
  style.disabled = !style.disabled;
  const buttonText = style.disabled ? "Enable" : "Disable";
  button.innerText = buttonText;
});

Ergebnis

Das Ergebnis wird unten gezeigt. Drücken Sie den Button, um den disabled-Eigenschaftswert für den Stil zu toggeln, der für den Absatztext verwendet wird.

Einen programmatisch definierten Stil deaktivieren

Dieses Beispiel ist sehr ähnlich zu dem oben, außer dass der Stil programmatisch definiert wird.

HTML

Das HTML ist ähnlich wie im vorherigen Fall, aber die Definition enthält keine Standard-Stile.

<button>Enable</button>
<p>Text is black when style is disabled; blue when enabled.</p>
<p></p>

JavaScript

Zuerst erstellen wir das neue Style-Element im HTML. Dies wird erreicht, indem zuerst ein Style-Element mit Document.createElement() erstellt, ein Textknoten mit der Stildefinition erstellt und hinzugefügt und dann das Style-Element dem Dokumentenkörper hinzugefügt wird.

// Create the `style` element
const style = document.createElement("style");
const node = document.createTextNode("p { color: blue; }");
style.appendChild(node);
document.body.appendChild(style);

Wir können dann den Stil wie unten gezeigt deaktivieren. Beachten Sie, dass dies der früheste Punkt ist, an dem das Setzen der Eigenschaft auf true erfolgreich sein wird. Vor diesem Punkt hatte das Dokument keinen zugehörigen Stil, und daher ist der Wert standardmäßig false.

// Disable the style
style.disabled = true;

Zuletzt fügen wir einen Ereignishandler für den Button hinzu, der den deaktivierten Zustand und den Button-Text umschaltet (dies ist dasselbe wie im vorherigen Beispiel).

const button = document.querySelector("button");

button.addEventListener("click", () => {
  style.disabled = !style.disabled;
  const buttonText = style.disabled ? "Enable" : "Disable";
  button.innerText = buttonText;
});

Ergebnis

Das Ergebnis wird unten gezeigt. Drücken Sie den Button, um den deaktivierten Zustand des Stils zu toggeln, der für den Text verwendet wird.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• SVGStyleElement.disabled