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 July 2015.

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

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

Diese Eigenschaft ist schreibgeschützt, was bedeutet, dass es nicht möglich ist, ein CSSStyleDeclaration-Objekt zuzuweisen. Es ist jedoch möglich, einen inline Stil zu setzen, indem direkt ein String der style-Eigenschaft zugewiesen wird. In diesem Fall wird der String an CSSStyleDeclaration.cssText weitergeleitet. Die Verwendung von style auf diese Weise überschreibt alle inline Stile auf dem Element vollständig.

Daher ist es generell vorzuziehen, individuelle Eigenschaften auf dem CSSStyleDeclaration-Objekt zu setzen, um spezifische Stile zu einem Element hinzuzufügen, ohne andere Stilwerte zu verändern. 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 zu JavaScript-Bezeichnern mit diesen Regeln umgewandelt:

  • 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 die Eigenschaft wird in camel case umgewandelt: background-attachment wird zu backgroundAttachment.
  • Die Eigenschaft float, da sie ein reserviertes JavaScript-Schlüsselwort ist, wird zu cssFloat.

Die style-Eigenschaft hat im CSS-Cascade die gleiche Priorität wie eine via style-Attribut gesetzte inline Stil-Deklaration.

Wert

Ein dynamisches CSSStyleDeclaration-Objekt.

Beispiele

Stil-Informationen abrufen

Der folgende Codeausschnitt demonstriert, 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, 10))
  ) {
    out.textContent += `${
      elementStyle[prop]
    } = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;
  }
}

Spezifikationen

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

Browser-Kompatibilität

Siehe auch