SVGElement: Eigenschaft attributeStyleMap
Die attributeStyleMap
-Eigenschaft der SVGElement
Schnittstelle ist eine schreibgeschützte Eigenschaft, die ein aktuelles StylePropertyMap
-Objekt zurückgibt. Dieses enthält eine Liste von Stil-Eigenschaften des Elements, die im Inline-style
-Attribut des Elements definiert sind oder über die style
-Eigenschaft der SVGElement
Schnittstelle per Skript zugewiesen wurden.
Kurzschrift-Eigenschaften werden aufgeschlüsselt. Wenn Sie border-top: 1px solid black
setzen, werden stattdessen die Langschrift-Eigenschaften (border-top-color
, border-top-style
und border-top-width
) gesetzt.
Der Hauptunterschied zwischen der style
-Eigenschaft und der attributeStyleMap
-Eigenschaft ist, dass die style
-Eigenschaft ein CSSStyleDeclaration
-Objekt zurückgibt, während die attributeStyleMap
-Eigenschaft ein StylePropertyMap
-Objekt zurückgibt.
Obwohl die Eigenschaft selbst nicht beschreibbar ist, können Sie Inline-Stile sowohl über das zurückgegebene StylePropertyMap
-Objekt lesen und schreiben als auch über das über die style
-Eigenschaft zurückgegebene CSSStyleDeclaration
-Objekt.
Wert
Ein aktuelles StylePropertyMap
-Objekt.
Beispiele
Der folgende Code zeigt das Verhältnis zwischen dem style
-Attribut und der attributeStyleMap
-Eigenschaft:
<div style="white-space: pre-line;">
<svg
width="50"
height="50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 250 250"
width="250"
height="250"
style="white-space: pre-line;">
<circle
cx="100"
cy="100"
r="50"
id="el"
style="border-top: 1px solid blue; color: red;" />
</svg>
<div id="output"></div>
</div>
#el {
font-size: 16px;
}
const element = document.getElementById("el");
const output = document.getElementById("output");
for (const property of element.attributeStyleMap) {
output.textContent += `${property[0]} = ${property[1][0].toString()}\n`;
}
Spezifikationen
Specification |
---|
CSS Typed OM Level 1 # dom-elementcssinlinestyle-attributestylemap |
Browser-Kompatibilität
BCD tables only load in the browser