HTMLElement : propriété attributeStyleMap

La propriété en lecture seule attributeStyleMap de l'interface HTMLElement retourne un objet StylePropertyMap dynamique qui contient la liste des propriétés de style de l'élément définies dans l'attribut style en ligne, ou assignées via la propriété style de l'interface HTMLElement par script.

Les propriétés abrégées sont développées. Si vous définissez border-top: 1px solid black, les propriétés détaillées (border-top-color, border-top-style et border-top-width) sont définies à la place.

La principale différence entre la propriété style et la propriété attributeStyleMap est que la propriété style retourne un objet CSSStyleDeclaration, tandis que la propriété attributeStyleMap retourne un objet StylePropertyMap.

Bien que la propriété elle-même 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 propriété style.

Valeur

Un objet StylePropertyMap dynamique.

Exemples

L'extrait de code suivant montre la relation entre l'attribut style et la propriété attributeStyleMap :

<div id="el" style="border-top: 1px solid blue; color: red;">
 Un élément 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`;
}

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété HTMLElement.style
• La propriété SVGElement.attributeStyleMap
• La propriété MathMLElement.attributeStyleMap