MathMLElement: style-Eigenschaft

Baseline 2023
Newly available

Since January 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die schreibgeschützte style-Eigenschaft des MathMLElement gibt den inline Stil eines Elements in Form eines dynamischen CSSStyleDeclaration-Objekts zurück. Dieses Objekt enthält eine Liste aller Stil-Eigenschaften für dieses Element mit Werten, die nur für die Attribute zugewiesen sind, die im inline style-Attribut des Elements definiert sind.

Kurzschreibweise-Eigenschaften werden erweitert. Wenn Sie style="border-top: 1px solid black" setzen, werden die Langform-Eigenschaften (border-top-color, border-top-style und border-top-width) stattdessen gesetzt.

Diese Eigenschaft ist schreibgeschützt, was bedeutet, dass es nicht möglich ist, ein CSSStyleDeclaration-Objekt daran zuzuweisen. Es ist jedoch möglich, einen inline Stil zu setzen, indem Sie direkt einen String an die style-Eigenschaft zuweisen. In diesem Fall wird der String an CSSStyleDeclaration.cssText weitergeleitet. Die Verwendung von style auf diese Weise wird alle inline Stile des Elements vollständig überschreiben.

Um spezifische Stile zu einem Element hinzuzufügen, ohne andere Stilwerte zu verändern, ist es daher in der Regel vorzuziehen, einzelne Eigenschaften auf dem CSSStyleDeclaration-Objekt zu setzen. Sie können beispielsweise schreiben element.style.backgroundColor = "red".

Eine Stil-Deklaration wird zurückgesetzt, indem sie auf null oder einen leeren String gesetzt wird, z.B. elt.style.color = null.

Hinweis: CSS-Eigenschaftsnamen werden in JavaScript-Identifikatoren mit diesen Regeln umgewandelt:

  • Wenn die Eigenschaft aus einem Wort besteht, bleibt sie unverändert: height bleibt unverändert (in Kleinbuchstaben).
  • Wenn die Eigenschaft aus mehreren Wörtern besteht, die durch Bindestriche getrennt sind, werden die Bindestriche entfernt und sie wird in camel case umgewandelt: background-attachment wird zu backgroundAttachment.
  • Die Eigenschaft float, da es sich um ein reserviertes JavaScript-Schlüsselwort handelt, wird in cssFloat umgewandelt.

Die style-Eigenschaft hat denselben Vorrang in der CSS-Kaskade wie eine inline Stil-Deklaration, die über das style-Attribut gesetzt wird.

Wert

Ein dynamisches CSSStyleDeclaration-Objekt.

Beispiele

Stilinformationen abrufen

Der folgende Code-Schnipsel demonstriert, wie das style-Attribut in eine Liste von Einträgen in CSSStyleDeclaration übersetzt wird:

html
<math>
  <mrow>
    <mi>f</mi>
    <mo stretchy="false">(</mo>
    <mi class="parameter" style="color: red; border-bottom: 1px solid">x</mi>
    <mo stretchy="false">)</mo>
    <mo>=</mo>
    <mi>x</mi>
  </mrow>
</math>
<pre id="out"></pre>
js
const element = document.querySelector(".parameter");
const out = document.getElementById("out");
const elementStyle = element.style;

// We loop through all the element's styles using `for...in`
for (const prop in elementStyle) {
  // We check if the property belongs to the CSSStyleDeclaration instance
  // We also ensure that the property is a numeric index (indicating an inline style)
  if (
    Object.hasOwn(elementStyle, prop) &&
    !Number.isNaN(Number.parseInt(prop))
  ) {
    out.textContent += `${
      elementStyle[prop]
    } = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;
  }
}

Spezifikationen

Specification
CSS Object Model (CSSOM)
# dom-elementcssinlinestyle-style

Browser-Kompatibilität

Siehe auch