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 Live-Objekts vom Typ CSSStyleDeclaration zurück. Dieses enthält eine Liste aller Stil-Eigenschaften für das Element, wobei Werte nur für die Attribute zugewiesen sind, die im style-Attribut des Elements definiert sind.

Kurznotationen werden erweitert. Wenn Sie style="border-top: 1px solid black" setzen, werden die Langnotationen (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 ihr zuzuweisen. Es ist jedoch möglich, einen Inline-Stil zu setzen, indem ein string direkt der style-Eigenschaft zugewiesen wird. In diesem Fall wird der String an CSSStyleDeclaration.cssText weitergeleitet. Dadurch werden alle Inline-Stile des Elements vollständig überschrieben.

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

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 mit diesen Regeln in JavaScript-Bezeichner umgewandelt:

  • Wenn die Eigenschaft aus einem Wort besteht, bleibt sie unverändert: height bleibt unverändert (in Kleinschreibung).
  • 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, die ein reserviertes JavaScript-Schlüsselwort ist, wird in cssFloat umgewandelt.

Die style-Eigenschaft hat in der CSS-Kaskade die gleiche Priorität wie eine Inline-Stil-Deklaration, die über das style-Attribut gesetzt wird.

Wert

Ein Live-Objekt vom Typ CSSStyleDeclaration.

Beispiele

Stilinformationen abrufen

Der folgende Codeausschnitt 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, 10))
  ) {
    out.textContent += `${
      elementStyle[prop]
    } = '${elementStyle.getPropertyValue(elementStyle[prop])}'\n`;
  }
}

Spezifikationen

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

Browser-Kompatibilität

Siehe auch