HTMLElement: 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 July 2015.

Die schreibgeschützte style-Eigenschaft des HTMLElement gibt den inline Stil eines Elements in Form eines Live-CSSStyleDeclaration-Objekts zurück, das eine Liste aller Stileigenschaften für dieses Element enthält, wobei nur für die Attribute Werte zugewiesen sind, die im inline-style-Attribut des Elements definiert sind.

Abkürzungseigenschaften werden erweitert. Wenn Sie style="border-top: 1px solid black" setzen, werden stattdessen die Langform-Eigenschaften (border-top-color, border-top-style und border-top-width) gesetzt.

Diese Eigenschaft ist schreibgeschützt, das bedeutet, es ist nicht möglich, ein CSSStyleDeclaration-Objekt zuzuweisen. Es ist jedoch möglich, einen inline Stil festzulegen, indem direkt ein String der style-Eigenschaft zugewiesen wird. In diesem Fall wird der String an CSSStyleDeclaration.cssText weitergeleitet. Die Verwendung von style auf diese Weise wird alle inline Stile des Elements vollständig überschreiben.

Daher ist es im Allgemeinen vorzuziehen, einzelne Eigenschaften auf dem CSSStyleDeclaration-Objekt festzulegen, um spezifische Stile zu einem Element hinzuzufügen, ohne andere Stilwerte zu verändern. Zum Beispiel können Sie element.style.backgroundColor = "red" schreiben.

Eine Stil-Deklaration wird durch Setzen auf null oder einen leeren String zurückgesetzt, z.B. elt.style.color = null.

Hinweis: CSS-Eigenschaftsnamen werden gemäß diesen Regeln in JavaScript-Bezeichner umgewandelt:

  • Wenn die Eigenschaft aus einem Wort besteht, bleibt sie unverändert: height bleibt wie sie ist (in Kleinbuchstaben). Da float ein reserviertes Schlüsselwort in JavaScript ist, wurde dieser Eigenschaftsname historisch in cssFloat umgewandelt. Alle modernen Browser unterstützen nun die direkte Verwendung von float in JavaScript, um auf die float CSS-Eigenschaft zuzugreifen. Jedoch wird cssFloat in älteren Browsern verwendet und als Alias in modernen Browsern weiterhin unterstützt.
  • 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 zu backgroundAttachment.

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-CSSStyleDeclaration-Objekt.

Beispiele

Abrufen von Stilinformationsdaten

Der folgende Code-Schnipsel zeigt, wie sich die mit der style-Eigenschaft des Elements erhaltenen Werte auf den im HTML-Attribut festgelegten Stil beziehen:

html
<div style="font-weight: bold;">
  <div style="border-top: 1px solid blue; color: red;" id="elt">
    An example div
  </div>
  <pre id="out"></pre>
</div>
js
const element = document.getElementById("elt");
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`;
  }
}

Beachten Sie, dass font-weight nicht als Wert für elementStyle aufgeführt ist, da es nicht im style-Attribut des Elements selbst definiert ist. Vielmehr wird es von der Definition des übergeordneten Elements geerbt. Beachten Sie auch, dass die Kurzform-Eigenschaft border-top, die im style-Attribut definiert ist, nicht direkt aufgeführt wird. Vielmehr wird sie durch die drei entsprechenden Langform-Eigenschaften (border-top-color, border-top-style und border-top-width) ersetzt.

Spezifikationen

Specification
CSS Object Model (CSSOM)
# dom-elementcssinlinestyle-style

Browser-Kompatibilität

Siehe auch