HTMLElement: attributeStyleMap-Eigenschaft

Die schreibgeschützte attributeStyleMap-Eigenschaft der HTMLElement-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 die style-Eigenschaft der HTMLElement-Schnittstelle per Skript zugewiesen wurden.

Kurzschreibweisen werden erweitert. Wenn Sie border-top: 1px solid black festlegen, werden die Langschreibweisen-Eigenschaften (border-top-color, border-top-style und border-top-width) stattdessen gesetzt.

Der Hauptunterschied zwischen der style-Eigenschaft und der attributeStyleMap-Eigenschaft besteht darin, 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 über das von ihr zurückgegebene StylePropertyMap-Objekt Inline-Stile lesen und schreiben, genau wie über das CSSStyleDeclaration-Objekt, das über die style-Eigenschaft zurückgegeben wird.

<div style="white-space: pre-line;">
  <div id="el" style="border-top: 1px solid blue; color: red;">
    An example element
  </div>
  <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`;
}