MathMLElement: style Eigenschaft

Wert

Ein live CSSStyleProperties Objekt.

Obwohl die style Eigenschaft selbst schreibgeschützt ist, im Sinne, dass Sie das CSSStyleProperties Objekt nicht ersetzen können, können Sie weiterhin direkt der style Eigenschaft zuweisen, was gleichbedeutend mit der Zuweisung zu ihrer cssText Eigenschaft ist. Sie können das CSSStyleProperties Objekt auch mit den Methoden setProperty() und removeProperty() ändern.

Beschreibung

Die Werte der im Attribut style des Elements gesetzten Inline-Stile werden durch entsprechende Eigenschaften des zurückgegebenen CSSStyleProperties Objekts reflektiert.

Kurzform-Eigenschaften der CSS des Elements werden zu ihren entsprechenden Langform-Eigenschaften expandiert. Beispielsweise 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, sowie border-top-width und borderTopWidth dargestellt werden.

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

Um spezifische Stile zu einem Element hinzuzufügen, ohne andere Stilwerte zu verändern, ist es generell vorzuziehen, einzelne Eigenschaften auf dem CSSStyleProperties Objekt zu setzen. Beispielsweise können Sie element.style.backgroundColor = "red" schreiben. Eine Stil-Deklaration wird zurückgesetzt, indem sie auf null oder eine leere Zeichenkette 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-Stil-Deklaration.

Beispiele

Aufzählung der Stilinformationen

Dieses Beispiel zeigt, wie wir die strichbenannten Eigenschaften 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>

#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 Langform-CSS-Eigenschaften des Elements aufzählbare Werte sind (die Inline-Kurzform-Eigenschaft wird nicht aufgezählt).

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung dynamischer Stilinformations
• HTMLElement.style
• SVGElement.style
• MathMLElement.attributeStyleMap