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 den inline Stil eines Elements in Form eines Live-CSSStyleDeclaration-Objekts zurück, das eine Liste aller Stil-Eigenschaften für dieses Element enthält, mit Werten, die nur für die Attribute zugewiesen sind, die im inline-style-Attribut des Elements definiert sind.
Kurzschreibweisen werden erweitert. Wenn Sie style="border-top: 1px solid black" setzen, werden die Langform-Eigenschaften (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. Dennoch ist es möglich, einen Inline-Stil festzulegen, indem man direkt einen String der style-Eigenschaft zuweist. In diesem Fall wird der String an CSSStyleDeclaration.cssText weitergeleitet. Die Verwendung von style auf diese Weise überschreibt alle Inline-Stile des Elements vollständig.
Daher ist es im Allgemeinen vorzuziehen, spezifische Stile einem Element hinzuzufügen, ohne andere Stilwerte zu ändern, indem man einzelne Eigenschaften auf dem CSSStyleDeclaration-Objekt festlegt. Beispielsweise 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 umgewandelt:
- Wenn die Eigenschaft aus einem Wort besteht, bleibt sie unverändert:
heightbleibt wie sie ist (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-attachmentwird zubackgroundAttachment. - Die Eigenschaft
float, da sie ein reserviertes JavaScript-Schlüsselwort ist, wird zucssFloat.
Die style-Eigenschaft hat dieselbe Priorität in der CSS-Kaskade wie eine Inline-Stil-Deklaration, die über das style-Attribut gesetzt wird.
Wert
Ein Live-CSSStyleDeclaration-Objekt.
Beispiele
Stil-Informationen erhalten
Der folgende Code-Schnipsel demonstriert, wie das style-Attribut in eine Liste von Einträgen in CSSStyleDeclaration übersetzt wird:
<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="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, 10))
) {
out.textContent += `${
elementStyle[prop]
} = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;
}
}
Spezifikationen
| Specification |
|---|
| CSS Object Model (CSSOM) # dom-elementcssinlinestyle-style |
Browser-Kompatibilität
Loading…