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 zubackgroundAttachment
. - Die Eigenschaft
float
, da sie ein reserviertes JavaScript-Schlüsselwort ist, wird incssFloat
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:
<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))
) {
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