HTMLElement : proprit attributeStyleMap

La proprit en lecture seule attributeStyleMap de l'interface HTMLElement retourne un objet StylePropertyMap dynamique qui contient la liste des proprits de style de l'lment dfinies dans l'attribut style en ligne, ou assignes via la proprit style de l'interface HTMLElement par script.

Les proprits abrges sont dveloppes. Si vous dfinissez border-top: 1px solid black, les proprits dtailles (border-top-color, border-top-style et border-top-width) sont dfinies la place.

La principale diffrence entre la proprit style et la proprit attributeStyleMap est que la proprit style retourne un objet CSSStyleDeclaration, tandis que la proprit attributeStyleMap retourne un objet StylePropertyMap.

Bien que la proprit elle-mme ne soit pas modifiable, vous pouvez lire et crire les styles en ligne via l'objet StylePropertyMap qu'elle retourne, tout comme avec l'objet CSSStyleDeclaration retourn par la proprit style.

<div id="el" >
  Un lment d'exemple
</div>
<div id="output"></div>

#el {
  font-size: 16px;
}

#output {
  white-space: pre-line;
}

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