HTMLStyleElement: disabled-Eigenschaft

Gibt true zurück, wenn das Stylesheet deaktiviert oder kein Stylesheet zugeordnet ist; andernfalls false. Der Standardwert ist false (falls ein Stylesheet zugeordnet ist).

Die Eigenschaft kann verwendet werden, um ein zugeordnetes Stylesheet zu aktivieren oder zu deaktivieren. Die Eigenschaft auf true zu setzen, wenn kein zugeordnetes Stylesheet vorhanden ist, hat keine Wirkung.

Dieses Beispiel zeigt, wie die disabled-Eigenschaft eines Styles, das im HTML mithilfe des HTML <style>-Elements definiert wurde, programmgesteuert gesetzt wird. Beachten Sie, dass Sie auch auf alle oder bestimmte Stylesheets im Dokument über Document.styleSheets zugreifen können.

HTML

Das HTML enthält ein HTML <style>-Element, das die Absatz-Elemente blau macht, ein Absatz-Element und einen Button, der verwendet wird, um den Style 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 Style bereits definiert ist, da 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;
});

Resultat

Das Ergebnis wird unten gezeigt. Drücken Sie den Button, um den disabled-Eigenschaftswert für den Stil des Absatztexts umzuschalten.

Dieses Beispiel ist dem vorherigen sehr ähnlich, außer dass der Style programmgesteuert definiert wird.

HTML

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

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

JavaScript

Zunächst erstellen wir das neue Style-Element im HTML. Dies geschieht, indem wir zunächst ein Style-Element mit Document.createElement() erstellen, einen Textknoten mit der Stildefinition erstellen und anhängen und dann das Style-Element zum Dokumentenkörper hinzufügen.

// 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 Zeitpunkt ist, an dem das Setzen der Eigenschaft auf true erfolgreich sein wird. Vor diesem Punkt hatte das Dokument keinen zugeordneten Stil, und daher ist der Standardwert 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;
});

Resultat

Das Ergebnis wird unten angezeigt. Drücken Sie den Button, um den deaktivierten Zustand für den Stil des Textes umzuschalten.

• SVGStyleElement.disabled