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 January 2020.

Die schreibgeschützte style-Eigenschaft des SVGElement gibt den inline Stil eines Elements in Form eines dynamischen CSSStyleDeclaration-Objekts zurück, das eine Liste aller Stil-Eigenschaften für dieses Element enthält, wobei Werte nur für die Attribute zugewiesen werden, die im Inline-style-Attribut des Elements definiert sind.

Kurzschreibweisen werden erweitert. Wenn Sie style="border-top: 1px solid black" festlegen, werden die Langschreibweisen (border-top-color, border-top-style und border-top-width) stattdessen festgelegt.

Diese Eigenschaft ist schreibgeschützt, das heißt, es ist nicht möglich, ein CSSStyleDeclaration-Objekt ihr zuzuweisen. Dennoch ist es möglich, einen Inline-Stil durch direkte Zuweisung eines Strings zur style-Eigenschaft festzulegen. In diesem Fall wird der String an CSSStyleDeclaration.cssText weitergeleitet. Die Verwendung von style in dieser Weise überschreibt alle Inline-Stile auf dem Element vollständig.

Um spezifische Stile zu einem Element hinzuzufügen, ohne andere Stilwerte zu verändern, ist es daher allgemein vorzuziehen, einzelne Eigenschaften auf dem CSSStyleDeclaration-Objekt festzulegen. Zum Beispiel können Sie element.style.backgroundColor = "red" schreiben.

Eine Stil-Deklaration wird zurückgesetzt, indem sie auf null oder einen leeren String gesetzt wird, z. B. elt.style.color = null.

Hinweis: CSS-Eigenschaftsnamen werden mit diesen Regeln in JavaScript-Identifikatoren konvertiert:

  • Wenn die Eigenschaft aus einem Wort besteht, bleibt sie unverändert: height bleibt unverändert (in Kleinbuchstaben).
  • Wenn die Eigenschaft aus mehreren Wörtern besteht, die durch Bindestriche getrennt sind, werden die Bindestriche entfernt und sie wird in camel case umgewandelt: background-attachment wird zu backgroundAttachment.
  • Die Eigenschaft float, ein reserviertes JavaScript-Schlüsselwort, wird in cssFloat umgewandelt.

Die style-Eigenschaft hat dieselbe Priorität in der CSS-Kaskade wie eine über das style-Attribut gesetzte Inline-Stil-Deklaration.

Wert

Ein dynamisches CSSStyleDeclaration-Objekt.

Beispiele

Stilinformationen abrufen

Der folgende Codeausschnitt zeigt, wie das style-Attribut in eine Liste von Einträgen in CSSStyleDeclaration übersetzt wird:

html
<svg
  width="50"
  height="50"
  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="out"></pre>
js
const element = document.querySelector("circle");
const out = document.getElementById("out");
const elementStyle = element.style;

// We loop through all the element's styles using `for...in`
for (const prop in elementStyle) {
  // We check if the property belongs to the CSSStyleDeclaration instance
  // We also ensure that the property is a numeric index (indicating an inline style)
  if (
    Object.hasOwn(elementStyle, prop) &&
    !Number.isNaN(Number.parseInt(prop))
  ) {
    out.textContent += `${
      elementStyle[prop]
    } = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;
  }
}

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch