SVGElement: attributeStyleMap-Eigenschaft

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die schreibgeschützte Eigenschaft attributeStyleMap der SVGElement-Schnittstelle gibt ein aktives StylePropertyMap-Objekt zurück, das eine Liste von Stileigenschaften des Elements enthält, die im Inline-style-Attribut des Elements definiert sind oder über das style-Eigentum der SVGElement-Schnittstelle mittels Skript zugewiesen werden.

Kurzschreibweiseigenschaften werden erweitert. Wenn Sie border-top: 1px solid black setzen, werden stattdessen die Langform-Eigenschaften (border-top-color, border-top-style und border-top-width) festgelegt.

Der Hauptunterschied zwischen der style-Eigenschaft und der attributeStyleMap-Eigenschaft besteht darin, dass die style-Eigenschaft ein CSSStyleDeclaration-Objekt zurückgeben wird, während die attributeStyleMap-Eigenschaft ein StylePropertyMap-Objekt zurückgibt.

Obwohl die Eigenschaft selbst nicht beschreibbar ist, können Sie Inline-Stile durch das StylePropertyMap-Objekt, das sie zurückgibt, lesen und schreiben, ähnlich wie durch das CSSStyleDeclaration-Objekt, das über die style-Eigenschaft zurückgegeben wird.

Wert

Ein aktives StylePropertyMap-Objekt.

Beispiele

Der folgende Codeausschnitt zeigt die Beziehung zwischen dem style-Attribut und der attributeStyleMap-Eigenschaft:

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="el"
    style="border-top: 1px solid blue; color: red;" />
</svg>
<div id="output"></div>
css
#el {
  font-size: 16px;
}

#output {
  white-space: pre-line;
}
js
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

Siehe auch