Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

SVGElement: style-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Die schreibgeschützte style-Eigenschaft des SVGElement gibt das Inline-style eines Elements in Form eines Live-Objekts von CSSStyleProperties zurück. Dieses Objekt kann verwendet werden, um die Inline-Stile eines Elements zu lesen und zu setzen.

Wert

Ein Live-Objekt von CSSStyleProperties.

Hinweis: Frühere Versionen der Spezifikation haben eine CSSStyleDeclaration zurückgegeben (von der CSSStyleProperties abgeleitet ist). Siehe die Tabelle zur Browser-Kompatibilität für Informationen zur Browserunterstützung.

Beschreibung

Die Werte der Inline-Stile, die im style-Attribut des Elements gesetzt sind, werden durch entsprechende Eigenschaften des zurückgegebenen CSSStyleProperties-Objekts widergespiegelt.

Hinweis: CSSStyleProperties hat mit Bindestrichen benannte Eigenschaften sowie entsprechende Camel-Case benannte Eigenschaften für alle vom Browser unterstützten CSS-Eigenschaften (nicht nur für diejenigen mit Inline-Stilen). Eigenschaften, die keinen entsprechenden Inline-Stil haben, sind auf "" gesetzt.

Kurzbefehle für CSS-Eigenschaften des Elements werden in ihre entsprechenden Langformen aufgeschlüsselt. Zum Beispiel würde ein Element mit dem Stil "border-top: 1px solid black" im zurückgegebenen Objekt durch Eigenschaften mit den Namen border-top und borderTop sowie die entsprechenden Langform-Eigenschaften border-top-color und borderTopColor, border-top-style und borderTopStyle, und border-top-width und borderTopWidth dargestellt.

Die style-Eigenschaft ist schreibgeschützt, das heißt, es ist nicht möglich, ein CSSStyleProperties-Objekt ihr zuzuweisen. Dennoch ist es möglich, einen Inline-Stil zu setzen, indem man direkt einen String der Eigenschaft zuweist. In diesem Fall kann der String von cssText gelesen werden. Die Verwendung von style auf diese Weise überschreibt alle Inline-Stile des Elements vollständig.

Um spezifische Stile zu einem Element hinzuzufügen, ohne andere Stilwerte zu ändern, ist es im Allgemeinen vorzuziehen, einzelne Eigenschaften auf dem CSSStyleProperties-Objekt zu setzen. Zum Beispiel können Sie element.style.backgroundColor = "red" schreiben. Eine Stildeklaration wird durch Setzen auf null oder einen leeren String zurückgesetzt, z. B. element.style.color = null.

Die style-Eigenschaft hat dieselbe Priorität in der CSS-Kaskade wie eine Inline-Stildeklaration, die über das style-Attribut gesetzt wird.

Beispiele

Aufzählung von Stilinformationen

Dieses Beispiel zeigt, wie wir die mit Bindestrichen benannten Eigenschaften von CSSStyleProperties auflisten können.

HTML

html
<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 250 250"
  width="250"
  height="250">
  <circle
    cx="100"
    cy="100"
    r="50"
    id="circle"
    style="fill: red; stroke: black; stroke-width: 2px;" />
</svg>
<pre id="log"></pre>

JavaScript

Der folgende Code iteriert über die aufzählbaren Eigenschaften der CSSStyleProperties und protokolliert das Ergebnis.

js
const element = document.querySelector("circle");
const elementStyle = element.style;

// Loop through all the element's styles using `for...in`
for (const prop in elementStyle) {
  // Check the property belongs to the CSSStyleProperties instance
  // Ensure the property is a numeric index (indicating a dash-named/inline style)
  if (
    Object.hasOwn(elementStyle, prop) &&
    !Number.isNaN(Number.parseInt(prop, 10))
  ) {
    log(
      `${
        elementStyle[prop]
      } = '${elementStyle.getPropertyValue(elementStyle[prop])}'`,
    );
  }
}

Ergebnisse

Das Ergebnis wird unten gezeigt. Beachten Sie, dass nur die Langform-CSS-Eigenschaften des Elements aufgezählte Werte sind (die Inline-Kurzform-Eigenschaft wird nicht aufgezählt).

Spezifikationen

Specification
CSS Object Model (CSSOM)
# dom-elementcssinlinestyle-style

Browser-Kompatibilität

Siehe auch