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 September 2015.

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

Abkürzende Eigenschaften 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, was bedeutet, dass es nicht möglich ist, 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. Wenn style auf diese Weise verwendet wird, werden alle Inline-Stilelemente des Elements vollständig überschrieben.

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 ändern. 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 nach diesen Regeln in JavaScript-Identifikatoren umgewandelt:

  • Wenn die Eigenschaft aus einem Wort besteht, bleibt sie unverändert: height bleibt so (in Kleinbuchstaben). Da float ein reserviertes Schlüsselwort in JavaScript ist, wurde dieser Eigenschaftsname historisch in cssFloat konvertiert. Alle modernen Browser unterstützen nun die direkte Verwendung von float in JavaScript, um auf die float CSS-Eigenschaft zuzugreifen, aber cssFloat wird in älteren Browsern verwendet und wird auch in modernen Browsern weiterhin als Alias unterstützt.
  • Wenn die Eigenschaft aus mehreren Wörtern besteht, die durch Bindestriche getrennt sind, werden die Bindestriche entfernt und sie wird in camel case umgewandelt: background-attachment wird zu backgroundAttachment.

Die style-Eigenschaft hat in der CSS-Kaskade die gleiche Priorität wie eine über das style-Attribut gesetzte Inline-Stil-Deklaration.

Wert

Ein Live-Objekt vom Typ CSSStyleDeclaration.

Beispiele

Stilinformationen abrufen

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

html
<!doctype html>
<html lang="en-US">
  <body style="font-weight:bold">
    <div style="border-top: 1px solid blue; color:red" id="elt">
      An example div
    </div>
    <pre id="out"></pre>
  </body>
</html>
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))
  ) {
    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 innerhalb des style-Attributs des Elements selbst definiert ist. Vielmehr wird es von der Definition seines Elternteils geerbt. Beachten Sie auch, dass die im style-Attribut definierte Abkürzungseigenschaft border-top nicht direkt aufgelistet 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

BCD tables only load in the browser

Siehe auch