Signatur
Beschreibung
Die schreibgeschützte Eigenschaft attributeStyleMap des MathMLElement-Interfaces gibt ein lebendiges StylePropertyMap-Objekt zurück. Es enthält die Stil-Eigenschaften, die im style-Attribut des Elements stehen. Änderungen an der Map wirken sich sofort auf das Attribut aus, und Änderungen am Attribut zeigen sich direkt in der Map.
Die Eigenschaft gehört zum CSS Typed Object Model (CSS Typed OM). Anders als bei element.style bekommt man keine reinen Zeichenketten zurück, sondern typisierte Objekte wie CSSUnitValue (z. B. { value: 1.5, unit: "em" }) oder CSSKeywordValue. Damit kann man mit Zahlen rechnen, ohne selbst Zeichenketten wie "12px" zerlegen und wieder zusammensetzen zu müssen. Das ist praktisch, wenn Formeln dynamisch skaliert, eingefärbt oder animiert werden sollen, etwa einzelne <mi>-, <mo>- oder <mn>-Elemente.
Die Eigenschaft selbst lässt sich nicht neu zuweisen. Man arbeitet stattdessen mit den Methoden der Map: set(), append(), get(), getAll(), has(), delete() und clear(). Außerdem lässt sich die Map mit for…of durchlaufen. Sie spiegelt nur Inline-Stile wider. Welche Werte am Ende tatsächlich gelten (also inklusive der Stylesheets), liefert element.computedStyleMap().
Rückgabewert
StylePropertyMap-Objekt, das mit dem style-Attribut des Elements verknüpft ist. Es lässt sich lesen und schreiben, die Eigenschaft selbst ist aber schreibgeschützt.Beispiele
Einzelne Variable einer Formel einfärben
// <math><mi id="x">x</mi><mo>+</mo><mn>1</mn></math>
const mi = document.getElementById('x');
mi.attributeStyleMap.set('color', 'crimson');
mi.attributeStyleMap.set('font-weight', 'bold');
console.log(mi.getAttribute('style'));
console.log(mi.attributeStyleMap.get('color').toString());Schriftgröße einer Formel typisiert vergrößern
const math = document.querySelector('math');
// Startwert als typisierter Wert setzen
math.attributeStyleMap.set('font-size', CSS.em(1));
const zoomIn = () => {
const size = math.attributeStyleMap.get('font-size'); // CSSUnitValue
math.attributeStyleMap.set('font-size', CSS.em(size.value + 0.25));
};
zoomIn();
zoomIn();
const current = math.attributeStyleMap.get('font-size');
console.log(current.value, current.unit);Inline-Stile auflisten und entfernen
const mo = document.querySelector('math mo');
mo.setAttribute('style', 'color: blue; padding-inline: 4px');
for (const [prop, values] of mo.attributeStyleMap) {
console.log(prop, values.map(String).join(', '));
}
mo.attributeStyleMap.delete('color');
console.log(mo.attributeStyleMap.has('color'), mo.attributeStyleMap.size);Funktionsprüfung mit Rückfall auf element.style
const highlight = (el) => {
if ('attributeStyleMap' in el) {
el.attributeStyleMap.set('background-color', 'yellow');
} else {
// z. B. Firefox ohne CSS Typed OM
el.style.backgroundColor = 'yellow';
}
};
document.querySelectorAll('math mi').forEach(highlight);// Wichtig · Fallstricke
- Browser-Unterstützung: Das CSS Typed OM gibt es in Chromium-Browsern und in Safari ab 16.4, in Firefox (Stand 2024) jedoch nicht. Vorher mit
'attributeStyleMap' in elementprüfen und bei Bedarf aufelement.stylezurückgreifen. Bei MathML hängt die Unterstützung außerdem von MathML Core ab, das in Chromium seit Version 109 enthalten ist. - Nur Inline-Stile: Werte aus Stylesheets tauchen hier nicht auf. Die tatsächlich geltenden Werte liefert
computedStyleMap(). - Kurzschreibweisen: Wird eine Kurzschreibweise wie
padding-inlinegesetzt, kann sie beim Durchlaufen der Map in ihre Einzel-Eigenschaften aufgelöst erscheinen.get()auf die Kurzschreibweise liefert dann unter Umständen einenCSSStyleValue, der nur als Zeichenkette vorliegt. - Fehler:
set()wirft einenTypeError, wenn der Eigenschaftsname unbekannt ist oder der Wert nicht zur Eigenschaft passt (z. B.CSS.px(5)fürcolor). - MathML-Präsentationsattribute wie
mathcolorodermathsizeerscheinen nicht in der Map, auch wenn sie sich auf den Stil auswirken. - Benutzerdefinierte Eigenschaften (
--foo) werden alsCSSUnparsedValuezurückgegeben.