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

Dieses Beispiel zeigt, wie die disabled-Eigenschaft für einen Stil, der in der HTML-SVG-Definition definiert wurde, programmgesteuert gesetzt wird.

HTML

Das HTML enthält eine SVG-Definition für einen <circle> mit einem <style>-Element sowie einen Button, der verwendet wird, um den Stil 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 ruft das style-Element (ein SVGStyleElement) über seine ID ab und setzt es dann als deaktiviert. Der Stil ist bereits vorhanden, da er in der SVG definiert ist, also 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 disabled-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 des für den Kreis verwendeten Stils umzuschalten.

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

Beachten Sie, dass Sie mehrere Stile sowohl in der SVG-Quelle als auch programmgesteuert anwenden können. Dieses Beispiel dient hauptsächlich dazu zu demonstrieren, wie der Stil extern erstellt werden kann und wann der Stil deaktiviert werden kann.

HTML

Das HTML ähnelt dem vorherigen Fall, aber die SVG-Definition enthält keine Standardstilgebung.

<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

Zunächst erstellen wir das neue SVG-Stilelement. Dies geschieht, indem zuerst ein Stilelement im SVG-Namensraum mit Document.createElementNS() erstellt, ein Textknoten mit der Stildefinition erstellt und angehängt und dann der Knoten der 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 Stil. Beachten Sie, dass dies der früheste Zeitpunkt ist, an dem das Setzen der Eigenschaft auf true erfolgreich ist. Vor diesem Zeitpunkt hatte die SVG keinen zugehörigen Stil, daher ist der Standardwert false.

//Disable the style
style.disabled = true;

Zuletzt fügen wir einen Ereignishandler für den Button hinzu, der den disabled-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;
  button.textContent = style.disabled ? "Enable" : "Disable";
});

Ergebnis

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

• HTMLStyleElement.disabled