HTMLElement: style-Eigenschaft

Wert

Ein Live-Objekt vom Typ CSSStyleProperties.

Beschreibung

Die Werte der in einem Element gesetzten Inline-Stile im style-Attribut werden durch entsprechende Eigenschaften des zurückgegebenen CSSStyleProperties-Objekts widergespiegelt.

Kurzform-CSS-Eigenschaften des Elements werden in ihre entsprechenden Langformen-Eigenschaften 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 dargestellt, sowie durch die entsprechenden Langform-Eigenschaften border-top-color und borderTopColor, border-top-style und borderTopStyle, und border-top-width und borderTopWidth.

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

Um spezifische Stile zu einem Element hinzuzufügen, ohne andere Stilwerte zu verändern, ist es in der Regel vorzuziehen, einzelne Eigenschaften des CSSStyleProperties-Objekts zu setzen. Zum Beispiel 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 Inline-Stil-Deklaration, die über das style-Attribut gesetzt wird.

Beispiele

Grundlegende Nutzung

Dieses Codebeispiel zeigt, wie Sie die Inline-Stile eines Elements lesen können. In jedem Fall werden die Bindestrich-basierten Stileigenschaften mit getPropertyValue() gelesen und die camel-case-Eigenschaften mit dem Punkt-Operator erhalten.

HTML

Zuerst definieren wir ein <div>-Element und ein verschachteltes Element, das unterschiedliche Inline-Stile definiert, sowohl in Kurz- als auch in Langform.

<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 holt sich das innere Element, liest dessen Stil und protokolliert die Bindestrich- und camel-case benannten CSS-Stileigenschaften.

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 wird unten angezeigt. In jedem Fall sehen wir, dass die Stile, die mit den Bindestrich- und camel-case benannten Eigenschaften gelesen werden, identisch sind. Wir sehen auch, dass die border-top-Eigenschaft, die dem style-Attribut des Elements entspricht, vorhanden ist und dass für jeden ihrer Teile eine Langform-Eigenschaft definiert ist (border-top-color, border-top-style und border-top-width).

Beachten Sie, dass font-weight auf den CSSStyleProperties definiert ist (wie alle anderen CSS-Eigenschaften, obwohl wir sie nicht protokolliert haben). Es handelt sich jedoch nicht um einen Inline-Stil für das verschachtelte Element, daher ist sein Wert auf die leere Zeichenkette ("") gesetzt.

Aufzählen von Stilinformationen

Dieses Beispiel zeigt, wie wir die Bindestrich-Eigenschaften von CSSStyleProperties aufzählen können.

HTML

Zuerst definieren wir ein <div>-Element und ein verschachteltes Element, das unterschiedliche Inline-Stile definiert, sowohl in Kurz- als auch in Langform. Dies ist das gleiche 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 iteriert über die enumerierbaren Eigenschaften der 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 wird unten angezeigt. Beachten Sie, dass nur die Langform-CSS-Eigenschaften des Elements als enumerierte Werte vorhanden sind (die Inline-Kurzform-Eigenschaft wird nicht aufgezählt).

Aktualisierung des Randstils

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

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

#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);
});

Manipulation von Stilen

In diesem Beispiel werden einige grundlegende Stileigenschaften eines HTML-Absatzelements über das Style-Objekt im Element und dessen CSS-Stileigenschaften, die aus dem DOM abgerufen und gesetzt werden können, bearbeitet. In diesem Fall manipulieren Sie die individuellen Stile direkt. Sie können auch styleSheets und ihre Regeln verwenden, um Stile für ganze Dokumente zu ändern.

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

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 Stilinformationen verwenden
• SVGElement.style
• MathMLElement.style
• HTMLElement.attributeStyleMap
• HTML-Attribut style