MathMLElement: Style-Eigenschaft

Wert

Ein lebendiges CSSStyleProperties-Objekt.

Beschreibung

Die Werte der im style-Attribut des Elements gesetzten Inline-Stile spiegeln sich in den entsprechenden Eigenschaften des zurückgegebenen CSSStyleProperties-Objekts wider.

Abkürzende CSS-Eigenschaften des Elements werden auf ihre entsprechenden Langformen erweitert. 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 entsprechenden Langform-Eigenschaften border-top-color und borderTopColor, border-top-style und borderTopStyle und border-top-width und borderTopWidth dargestellt.

Die style-Eigenschaft ist schreibgeschützt, was bedeutet, dass es nicht möglich ist, ein CSSStyleProperties-Objekt zuzuweisen. Es ist jedoch möglich, einen Inline-Stil zu setzen, indem direkt ein String der Eigenschaft zugewiesen wird. In diesem Fall kann der String über cssText gelesen werden. Die Verwendung von style auf diese Weise wird alle Inline-Stile auf dem Element vollständig überschreiben.

Um spezifische Stile zu einem Element hinzuzufügen, ohne andere Stilwerte zu ändern, ist es in der Regel vorzuziehen, individuelle Eigenschaften auf dem CSSStyleProperties-Objekt zu setzen. Zum Beispiel können Sie element.style.backgroundColor = "red" schreiben. Eine Stil-Deklaration wird zurückgesetzt, indem man sie auf null oder einen leeren String setzt, 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-Stil-Deklaration.

Beispiele

Aufzählen von Stilinformationen

Dieses Beispiel zeigt, wie wir die Bindestrich-benannten Eigenschaften von CSSStyleProperties auflisten 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>

#log {
  height: 80px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

Der folgende Code iteriert die aufzählbaren Eigenschaften der CSSStyleProperties und protokolliert das Ergebnis.

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

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 gezeigt. Beachten Sie, dass nur die lange Schreibweise der CSS-Eigenschaften des Elements aufgezählt wird (die Inline-Abkürzungseigenschaft wird nicht aufgezählt).

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung dynamischer Styling-Informationen
• HTMLElement.style
• SVGElement.style
• MathMLElement.attributeStyleMap