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 das Inline-style
eines Elements in Form eines Live-Objekts von CSSStyleProperties
zurück. Dieses Objekt kann verwendet werden, um die Inline-Stile eines Elements zu lesen und zu setzen.
Wert
Ein Live-Objekt von CSSStyleProperties
.
Hinweis:
Frühere Versionen der Spezifikation haben eine CSSStyleDeclaration
zurückgegeben (von der CSSStyleProperties
abgeleitet ist).
Siehe die Tabelle zur Browser-Kompatibilität für Informationen zur Browserunterstützung.
Beschreibung
Die Werte der Inline-Stile, die im style
-Attribut des Elements gesetzt sind, werden durch entsprechende Eigenschaften des zurückgegebenen CSSStyleProperties
-Objekts widergespiegelt.
Hinweis:
CSSStyleProperties
hat mit Bindestrichen benannte Eigenschaften sowie entsprechende Camel-Case benannte Eigenschaften für alle vom Browser unterstützten CSS-Eigenschaften (nicht nur für diejenigen mit Inline-Stilen).
Eigenschaften, die keinen entsprechenden Inline-Stil haben, sind auf ""
gesetzt.
Kurzbefehle für CSS-Eigenschaften des Elements werden in ihre entsprechenden Langformen aufgeschlüsselt. Zum Beispiel würde ein Element mit dem Stil "border-top: 1px solid black"
im zurückgegebenen Objekt durch Eigenschaften mit den Namen border-top
und borderTop
sowie die entsprechenden Langform-Eigenschaften border-top-color
und borderTopColor
, border-top-style
und borderTopStyle
, und border-top-width
und borderTopWidth
dargestellt.
Die style
-Eigenschaft ist schreibgeschützt, das heißt, es ist nicht möglich, ein CSSStyleProperties
-Objekt ihr zuzuweisen. Dennoch ist es möglich, einen Inline-Stil zu setzen, indem man direkt einen String der Eigenschaft zuweist. In diesem Fall kann der String von cssText
gelesen werden. Die Verwendung von style
auf diese Weise überschreibt alle Inline-Stile des Elements vollständig.
Um spezifische Stile zu einem Element hinzuzufügen, ohne andere Stilwerte zu ändern, ist es im Allgemeinen vorzuziehen, einzelne Eigenschaften auf dem CSSStyleProperties
-Objekt zu setzen. Zum Beispiel können Sie element.style.backgroundColor = "red"
schreiben. Eine Stildeklaration wird durch Setzen auf null
oder einen leeren String zurückgesetzt, z. B. element.style.color = null
.
Die style
-Eigenschaft hat dieselbe Priorität in der CSS-Kaskade wie eine Inline-Stildeklaration, die über das style
-Attribut gesetzt wird.
Beispiele
>Aufzählung von Stilinformationen
Dieses Beispiel zeigt, wie wir die mit Bindestrichen benannten Eigenschaften von CSSStyleProperties
auflisten können.
HTML
<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="log"></pre>
JavaScript
Der folgende Code iteriert über die aufzählbaren Eigenschaften der CSSStyleProperties
und protokolliert das Ergebnis.
const element = document.querySelector("circle");
const elementStyle = element.style;
// Loop through all the element's styles using `for...in`
for (const prop in elementStyle) {
// Check the property belongs to the CSSStyleProperties instance
// Ensure the property is a numeric index (indicating a dash-named/inline style)
if (
Object.hasOwn(elementStyle, prop) &&
!Number.isNaN(Number.parseInt(prop, 10))
) {
log(
`${
elementStyle[prop]
} = '${elementStyle.getPropertyValue(elementStyle[prop])}'`,
);
}
}
Ergebnisse
Das Ergebnis wird unten gezeigt. Beachten Sie, dass nur die Langform-CSS-Eigenschaften des Elements aufgezählte Werte sind (die Inline-Kurzform-Eigenschaft wird nicht aufgezählt).
Spezifikationen
Specification |
---|
CSS Object Model (CSSOM)> # dom-elementcssinlinestyle-style> |
Browser-Kompatibilität
Loading…