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.

<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`;
}