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). Dafloat
ein reserviertes Schlüsselwort in JavaScript ist, wurde dieser Eigenschaftsname historisch incssFloat
konvertiert. Alle modernen Browser unterstützen nun die direkte Verwendung vonfloat
in JavaScript, um auf diefloat
CSS-Eigenschaft zuzugreifen, abercssFloat
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 zubackgroundAttachment
.
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:
<!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>
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