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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
style

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Siehe auch