HTMLElement: style-Eigenschaft

Wert

Ein Live-Objekt vom Typ CSSStyleProperties.

Obwohl die Eigenschaft style selbst schreibgeschützt ist – Sie können das CSSStyleProperties-Objekt also nicht ersetzen –, können Sie style direkt einen Wert zuweisen. Dies entspricht einer Zuweisung an die Eigenschaft cssText des Objekts. Sie können das CSSStyleProperties-Objekt auch mit den Methoden setProperty() und removeProperty() ändern.

Beschreibung

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

CSS-Kurzschreibweisen des Elements werden in ihre entsprechenden Langschreibweisen aufgelöst. Beispielsweise wird ein Element mit dem Style "border-top: 1px solid black" im zurückgegebenen Objekt durch die Eigenschaften border-top und borderTop sowie durch die entsprechenden Langschreibweisen border-top-color und borderTopColor, border-top-style und borderTopStyle sowie border-top-width und borderTopWidth repräsentiert.

Um einem Element bestimmte Styles hinzuzufügen, ohne andere Style-Werte zu verändern, sollten Sie in der Regel einzelne Eigenschaften des CSSStyleProperties-Objekts setzen. Beispielsweise können Sie element.style.backgroundColor = "red" schreiben. Eine Style-Deklaration wird zurückgesetzt, indem Sie ihr null oder eine leere Zeichenfolge zuweisen, beispielsweise element.style.color = null.

Die Eigenschaft style hat in der CSS-Kaskade dieselbe Priorität wie eine Inline-Style-Deklaration, die über das Attribut style gesetzt wurde.

Beispiele

Grundlegende Verwendung

Dieses Codebeispiel zeigt, wie Sie die Inline-Styles eines Elements auslesen. Dabei werden die Style-Eigenschaften in Bindestrichschreibweise jeweils mit getPropertyValue() und die Eigenschaften in Camel-Case-Schreibweise mit dem Punktoperator ausgelesen.

HTML

Zunächst definieren wir ein <div>-Element und ein darin verschachteltes Element mit unterschiedlichen Inline-Styles. Dabei verwenden wir sowohl Kurz- als auch Langschreibweisen.

<div style="font-weight: bold;">
  <div style="border-top: 1px solid blue; color: red;" id="elt">
    An example div
  </div>
  <pre id="log"></pre>
</div>

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

JavaScript

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

Der folgende Code greift auf das innere Element zu, liest seinen Style aus und protokolliert die CSS-Style-Eigenschaften in Bindestrich- und Camel-Case-Schreibweise.

const element = document.getElementById("elt");
const elementStyle = element.style;

// Longhand styles
log(`"border-top" = '${elementStyle.getPropertyValue("border-top")}'`);
log(`"borderTop" = '${elementStyle.borderTop}'`);

// Expanded longhand styles
log(
  `"border-top-width" = '${elementStyle.getPropertyValue("border-top-width")}'`,
);
log(`"borderTopWidth" = '${elementStyle.borderTopWidth}'`);

log(
  `"border-top-style" = '${elementStyle.getPropertyValue("border-top-style")}'`,
);
log(`"borderTopStyle" = '${elementStyle.borderTopStyle}'`);

log(
  `"border-top-color" = '${elementStyle.getPropertyValue("border-top-color")}'`,
);
log(`"borderTopColor" = '${elementStyle.borderTopColor}'`);

// Original shorthand style
log(`"color" = '${elementStyle.getPropertyValue("color")}'`);
log(`"color" = '${elementStyle.color}'`);

// Defined on parent
log(`"font-weight" = '${elementStyle.getPropertyValue("font-weight")}'`);
log(`"fontWeight" = '${elementStyle.fontWeight}'`);

Ergebnisse

Das Ergebnis ist unten dargestellt. In jedem Fall stimmen die Styles überein, unabhängig davon, ob sie über die Eigenschaften in Bindestrich- oder Camel-Case-Schreibweise ausgelesen wurden. Außerdem ist die Eigenschaft border-top vorhanden, die dem style-Attribut des Elements entspricht. Für jeden ihrer Bestandteile ist eine Eigenschaft in Langschreibweise definiert (border-top-color, border-top-style und border-top-width).

Beachten Sie, dass font-weight auf CSSStyleProperties definiert ist, ebenso wie alle anderen CSS-Eigenschaften, auch wenn wir diese nicht protokolliert haben. Für das verschachtelte Element ist font-weight jedoch kein Inline-Style. Daher ist sein Wert die leere Zeichenfolge ("").

Style-Informationen aufzählen

Dieses Beispiel zeigt, wie Sie die Eigenschaften von CSSStyleProperties in Bindestrichschreibweise aufzählen können.

HTML

Zunächst definieren wir ein <div>-Element und ein darin verschachteltes Element mit unterschiedlichen Inline-Styles. Dabei verwenden wir sowohl Kurz- als auch Langschreibweisen. Dies ist dasselbe HTML wie im vorherigen Beispiel.

<div style="font-weight: bold;">
  <div style="border-top: 1px solid blue; color: red;" id="elt">
    An example div
  </div>
  <pre id="log"></pre>
</div>

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

JavaScript

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

Der folgende Code durchläuft die aufzählbaren Eigenschaften von CSSStyleProperties und protokolliert das Ergebnis.

const element = document.getElementById("elt");
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 ist unten dargestellt. Beachten Sie, dass nur die CSS-Eigenschaften des Elements in Langschreibweise aufgezählt werden, nicht jedoch die Inline-Eigenschaft in Kurzschreibweise.

Rahmen-Style aktualisieren

<div id="box"></div>

<button id="btn1">Make border 20px-wide</button>
<button id="btn2">Make border 5px-wide</button>

#box {
  border: 5px solid green;
  width: 100px;
  height: 100px;
}

function setBorderWidth(width) {
  document.getElementById("box").style.borderWidth = `${width}px`;
}

document.getElementById("btn1").addEventListener("click", () => {
  setBorderWidth(20);
});
document.getElementById("btn2").addEventListener("click", () => {
  setBorderWidth(5);
});

Styles bearbeiten

In diesem Beispiel wird über das Style-Objekt eines HTML-Absatzelements und dessen CSS-Style-Eigenschaften auf einige grundlegende Style-Eigenschaften zugegriffen. Diese Eigenschaften können über das DOM ausgelesen und gesetzt werden. Hier bearbeiten Sie die einzelnen Styles direkt. Sie können auch styleSheets und deren Regeln verwenden, um Styles für ganze Dokumente zu ändern.

<p id="pid">Some text</p>
<p><button type="button">Change text</button></p>

function changeText() {
  const p = document.getElementById("pid");

  p.style.color = "blue";
  p.style.fontSize = "18pt";
}

document.querySelector("button").addEventListener("click", () => {
  changeText();
});

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Dynamische Style-Informationen verwenden
• SVGElement.style
• MathMLElement.style
• HTMLElement.attributeStyleMap
• HTML-Attribut style