HTMLElement: 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 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.

Wert

Ein aktives StylePropertyMap-Objekt.

Beispiele

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

html
<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>
css
#el {
  font-size: 16px;
}
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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
attributeStyleMap

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Siehe auch