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 zubackgroundAttachment
. - Die Eigenschaft
float
, ein reserviertes JavaScript-Schlüsselwort, wird incssFloat
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:
<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>
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