SVGStyleElement: disabled-Eigenschaft

Gibt true zurück, wenn das Stylesheet deaktiviert ist oder kein zugehöriges Stylesheet vorhanden ist; andernfalls false. Der Wert ist standardmäßig false (wenn ein zugehöriges Stylesheet vorhanden ist).

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

Dieses Beispiel demonstriert das programmgesteuerte Setzen der disabled-Eigenschaft auf einen Style, der in der HTML-SVG-Definition definiert wurde.

HTML

Das HTML enthält eine SVG-Definition für ein <circle> mit einem <style> Element, zusammen mit einem Button, der verwendet wird, um den Style zu deaktivieren.

<button>Enable</button>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <style id="circle_style_id">
    circle {
      fill: gold;
      stroke: green;
      stroke-width: 3px;
    }
  </style>
  <circle cx="50" cy="50" r="25" />
</svg>

JavaScript

Der folgende Code erhält das style-Element (ein SVGStyleElement) über seine ID und setzt es dann auf deaktiviert. Der Style existiert bereits, da er im SVG definiert ist, daher sollte dies erfolgreich sein.

const svg = document.querySelector("svg");
const style = svg.getElementById("circle_style_id");
style.disabled = true;

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

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

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

Ergebnis

Das Ergebnis wird unten gezeigt. Drücken Sie den Button, um die disabled-Eigenschaft auf dem für den Kreis verwendeten Style umzuschalten.

Dieses Beispiel ist dem obigen sehr ähnlich, mit dem Unterschied, dass der Style programmgesteuert definiert wird.

Beachten Sie, dass Sie mehrere Styles sowohl im SVG-Quellcode als auch programmgesteuert anwenden können. Dieses Beispiel wird hauptsächlich bereitgestellt, um zu demonstrieren, wie der Style extern erstellt wird und um zu zeigen, zu welchem Zeitpunkt der Style deaktiviert werden kann.

HTML

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

<button>Enable</button>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="50" cy="50" r="25" />
</svg>

JavaScript

Zuerst erstellen wir das neue SVG-Style-Element. Dies erfolgt, indem zuerst ein Style-Element im SVG-Namespace mit Document.createElementNS() erstellt wird, ein Textknoten mit der Stildefinition erstellt und hinzugefügt und das Element dann dem oben definierten SVG hinzugefügt wird.

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

// Create the `style` element in the SVG namespace
const style = document.createElementNS("http://www.w3.org/2000/svg", "style");
const node = document.createTextNode("circle { fill: red; }");
svg.appendChild(style);
style.appendChild(node);

Dann deaktivieren wir den Style. 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 SVG keinen zugehörigen Style, und der Wert ist daher 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 das gleiche wie im vorherigen Beispiel).

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

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

Ergebnis

Das Ergebnis wird unten gezeigt. Drücken Sie den Button, um den disabled-Zustand auf dem für den Kreis verwendeten Style umzuschalten.

• HTMLStyleElement.disabled