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 CSSStyleDeclaration-Objekts zurück, das eine Liste aller Stil-Eigenschaften für dieses Element enthält, mit Werten, die nur für die Attribute zugewiesen sind, die im inline style-Attribut des Elements definiert sind.

Kurzschreibweisen 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, das bedeutet, dass es nicht möglich ist, ein CSSStyleDeclaration-Objekt ihr zuzuweisen. Nichtsdestotrotz ist es möglich, einen inline Stil zu setzen, indem man einen String direkt der style-Eigenschaft zuweist. In diesem Fall wird der String an CSSStyleDeclaration.cssText weitergeleitet. Die Verwendung von style auf diese Weise wird alle inline Stile auf dem Element vollständig überschreiben.

Es ist daher im Allgemeinen vorzuziehen, spezifische Stile zu einem Element hinzuzufügen, ohne andere Stilwerte zu ändern, indem man einzelne Eigenschaften auf dem CSSStyleDeclaration-Objekt setzt. 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 konvertiert:

  • Wenn die Eigenschaft aus einem Wort besteht, bleibt sie wie sie ist: 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 camelCase umgewandelt: background-attachment wird zu backgroundAttachment.
  • Die Eigenschaft float, da sie ein reserviertes JavaScript-Schlüsselwort ist, wird in cssFloat umgewandelt.

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

Wert

Ein Live CSSStyleDeclaration-Objekt.

Beispiele

Abrufen von Stil-Informationen

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

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch