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-style eines Elements in Form eines lebendigen CSSStyleProperties-Objekts zurück. Dieses Objekt kann verwendet werden, um die Inline-Stile eines Elements zu lesen und zu setzen.
Wert
Ein lebendiges CSSStyleProperties-Objekt.
Hinweis:
Frühere Versionen der Spezifikation lieferten eine CSSStyleDeclaration (von der CSSStyleProperties abgeleitet ist).
Sehen Sie sich die Browser-Kompatibilität-Tabelle für Informationen zur Unterstützung durch Browser an.
Beschreibung
Die Werte der im style-Attribut des Elements gesetzten Inline-Stile werden durch entsprechende Eigenschaften des zurückgegebenen CSSStyleProperties-Objekts reflektiert.
Hinweis:
CSSStyleProperties verfügt über Eigenschaften mit Bindestrichnamen und entsprechenden camelCase Namen für alle vom Browser unterstützten CSS-Eigenschaften (nicht nur für die mit Inline-Stilen).
Eigenschaften, die keinen entsprechenden Inline-Stil haben, sind auf "" gesetzt.
Kurzhand-CSS-Eigenschaften des Elements werden in ihre entsprechenden Langform-Eigenschaften aufgeschlüsselt.
Zum Beispiel würde ein Element mit dem Stil "border-top: 1px solid black" im zurückgegebenen Objekt durch Eigenschaften mit den Namen border-top und borderTop, sowie die korrespondierenden Langform-Eigenschaften border-top-color und borderTopColor, border-top-style und borderTopStyle, und border-top-width und borderTopWidth repräsentiert werden.
Die style-Eigenschaft ist schreibgeschützt, das bedeutet, dass es nicht möglich ist, ein CSSStyleProperties-Objekt ihr zuzuweisen. Es ist jedoch möglich, einen Inline-Stil zu setzen, indem man direkt einen String der Eigenschaft zuweist. In diesem Fall kann der String von cssText gelesen werden. Die Verwendung von style auf diese Weise überschreibt alle Inline-Stile des Elements vollständig.
Um einem Element spezifische Stile hinzuzufügen, ohne andere Stilwerte zu verändern, ist es im Allgemeinen vorzuziehen, einzelne Eigenschaften auf dem CSSStyleProperties-Objekt zu setzen. Zum Beispiel, Sie können element.style.backgroundColor = "red" schreiben. Eine Stildefinition wird zurückgesetzt, indem sie auf null oder einen leeren String gesetzt wird, z.B. element.style.color = null.
Die style-Eigenschaft hat die gleiche Priorität in der CSS-Kaskade wie eine über das style-Attribut gesetzte Inline-Stildeklaration.
Beispiele
Aufzählen von Stilinformationen
Dieses Beispiel zeigt, wie wir die Bindestricheigenschaften von CSSStyleProperties aufzählen können.
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="log"></pre>
JavaScript
Der folgende Code durchläuft die aufzählbaren Eigenschaften der CSSStyleProperties und protokolliert das Ergebnis.
const element = document.querySelector(".parameter");
const elementStyle = element.style;
// Loop through all the element's styles using `for...in`
for (const prop in elementStyle) {
// Check the property belongs to the CSSStyleProperties instance
// Ensure the property is a numeric index (indicating a dash-named/inline style)
if (
Object.hasOwn(elementStyle, prop) &&
!Number.isNaN(Number.parseInt(prop, 10))
) {
log(
`${
elementStyle[prop]
} = '${elementStyle.getPropertyValue(elementStyle[prop])}'`,
);
}
}
Ergebnisse
Das Ergebnis wird unten angezeigt. Beachten Sie, dass nur die Langform-CSS-Eigenschaften des Elements aufzählbare Werte sind (die Inline-Kurzform-Eigenschaft wird nicht aufgezählt).
Spezifikationen
| Specification |
|---|
| CSS Object Model (CSSOM) # dom-elementcssinlinestyle-style |