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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
style

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch