MathMLElement: style-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2023.
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:
heightbleibt 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-attachmentwird zubackgroundAttachment. - Die Eigenschaft
float, die ein reserviertes JavaScript-Schlüsselwort ist, wird incssFloatumgewandelt.
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:
<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>
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
Loading…