Signatur
Beschreibung
Die Eigenschaft style eines MathMLElement (z. B. <math>, <mi>, <mfrac>) gibt ein live CSSStyleProperties-Objekt zurück. Es enthält ausschließlich die Deklarationen aus dem style-Attribut des Elements, also die Inline-Stile. Werte aus Stylesheets oder vererbte Werte stehen dort nicht.
Sie verwenden style, wenn Sie einzelne Teile einer Formel per Skript hervorheben, einfärben oder skalieren wollen, etwa um in einer interaktiven Lernanwendung einen Term zu markieren. Einzelne Eigenschaften setzen Sie in camelCase (el.style.backgroundColor) oder mit setProperty() in der CSS-Schreibweise (el.style.setProperty("background-color", "yellow")). Mit setProperty() lassen sich auch benutzerdefinierte Eigenschaften (--variable) und die Priorität "important" setzen.
Die Eigenschaft selbst ist schreibgeschützt: Sie können dem Objekt keine neue Deklaration zuweisen. Weil in Browsern aber [PutForwards=cssText] gilt, wird eine Zuweisung wie el.style = "color: red" an style.cssText weitergereicht und ersetzt dabei den gesamten Inline-Stil. Die tatsächlich wirksamen Werte ermitteln Sie mit getComputedStyle().
Rückgabewert
style-Attribut und die Darstellung aus. Nicht gesetzte Eigenschaften liefern einen leeren String "".Beispiele
Inline-Stil eines MathML-Elements auslesen
// HTML: <math><mi id="x" style="color: blue; font-size: 150%">x</mi></math>
const mi = document.getElementById("x");
console.log(mi instanceof MathMLElement);
console.log(mi.style.color);
console.log(mi.style.fontSize);
console.log(mi.style.fontWeight); // nicht inline gesetzt
console.log(mi.style.cssText);Term in einer Formel interaktiv hervorheben
// HTML: <math><mfrac><mi class="term">a</mi><mi class="term">b</mi></mfrac></math>
const terms = document.querySelectorAll("math .term");
terms.forEach((term) => {
term.addEventListener("mouseenter", () => {
term.style.backgroundColor = "#ffe58a";
term.style.setProperty("outline", "1px solid orange");
});
term.addEventListener("mouseleave", () => {
term.style.removeProperty("background-color");
term.style.removeProperty("outline");
});
});Alle Inline-Deklarationen durchlaufen und CSS-Variable setzen
const math = document.querySelector("math");
math.style.setProperty("--akzent", "crimson");
math.style.setProperty("color", "var(--akzent)", "important");
for (const name of math.style) {
console.log(name, "=", math.style.getPropertyValue(name),
math.style.getPropertyPriority(name));
}Inline-Stil vs. berechneter Stil
// CSS: math { color: green; }
const math = document.querySelector("math");
console.log(math.style.color); // nur Inline
console.log(getComputedStyle(math).color); // tatsächlich wirksam// Wichtig · Fallstricke
- Nur Inline-Stile:
stylezeigt keine Werte aus Stylesheets. Wirksame Werte ermitteln Sie mitgetComputedStyle(). - Überschreiben:
el.style = "…"bzw.el.style.cssText = "…"ersetzt alle bisherigen Inline-Deklarationen. Einzelne Werte setzen Sie deshalb lieber gezielt. - Schreibweise: Als Objekteigenschaft gilt camelCase (
fontSize), beisetProperty()/getPropertyValue()die CSS-Schreibweise mit Bindestrich (font-size). Benutzerdefinierte Eigenschaften (--x) funktionieren nur übersetProperty(). - Ungültige Werte werden stillschweigend verworfen. Es gibt keinen Fehler, der Wert bleibt einfach unverändert.
- MathML-Besonderheiten: Nicht jede CSS-Eigenschaft wirkt auf jedes MathML-Element gleich. Layout-Eigenschaften wie
displayoderwidthkönnen das MathML-Layout stören. MathML-spezifische Eigenschaften wiemath-style,math-depthundmath-shiftwerden erst seit Kurzem unterstützt. - Kompatibilität:
MathMLElementgibt es in Firefox schon lange, in Chromium ab Version 109 und in Safari ab 16.4. Der TypnameCSSStylePropertiesist neu, ältere Browser meldenCSSStyleDeclaration. Die Schnittstelle ist dieselbe. - CSP: Mit einer Content Security Policy ohne
'unsafe-inline'beistyle-srckönnenstyle-Attribute im Markup blockiert sein. Über das CSSOM (el.style.xyz = …) gesetzte Werte sind davon in der Regel nicht betroffen.