HTML-DOM - Stileigenschaft
Beispiel
Fügen Sie einem <h1>-Element eine rote Farbe hinzu:
document.getElementById("myH1").style.color = "red";
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die style-Eigenschaft gibt ein CSSStyleDeclaration-Objekt zurück, das das style-Attribut eines Elements darstellt.
Die style-Eigenschaft wird verwendet, um einen bestimmten Stil eines Elements mithilfe verschiedener CSS-Eigenschaften zu erhalten oder festzulegen.
Hinweis: Es ist nicht möglich, Stile zu setzen, indem man der style-Eigenschaft einen String zuweist, zB element .style = "color: red;". Um den Stil eines Elements festzulegen, fügen Sie eine „CSS“-Eigenschaft an style an und geben Sie einen Wert an, etwa so:
element.style.backgroundColor = "red"; // set the background color of an element to red
Wie Sie sehen können, unterscheidet sich die JavaScript-Syntax zum Festlegen von CSS-Eigenschaften geringfügig von CSS (backgroundColor statt background-color).
Eine Liste aller verfügbaren Eigenschaften finden Sie in unserer Stilobjekt-Referenz .
Hinweis: Die style-Eigenschaft gibt nur die CSS-Deklarationen zurück, die im Inline-Style-Attribut des Elements gesetzt sind, zB
<p style="color: red;">. Es ist nicht möglich, diese Eigenschaft zu verwenden, um Informationen über Stilregeln aus dem <head>-Abschnitt im Dokument oder externen Stylesheets zu erhalten.
Sie können jedoch von <head> aus auf das <style>-Element zugreifen, indem Sie document.getElementsByTagName() verwenden:
var x = document.getElementsByTagName("STYLE")[0]; // get the first <style> element
Hinweis: Es wird empfohlen, die Eigenschaft style anstelle der Methode element .setAttribute("style", "...") zu verwenden, da die Eigenschaft style keine anderen CSS-Eigenschaften überschreibt, die möglicherweise im style-Attribut angegeben sind.
Browser-Unterstützung
| Property | |||||
|---|---|---|---|---|---|
| style | Yes | Yes | Yes | Yes | Yes |
Syntax
Stileigenschaften zurückgeben:
element.style.property
Stileigenschaften festlegen:
element.style.property = value
Eigenschaftswerte
| Value | Description |
|---|---|
| value |
Specifies the value of the specified property. For example, for the borderBottom property: element.style.borderBottom = "2px solid red"; |
Technische Details
| Rückgabewert: | Ein CSSStyleDeclaration-Objekt, das das Stilattribut eines Elements darstellt |
|---|---|
| DOM-Version | Dom Level 2 CSS |
Mehr Beispiele
Beispiel
Rufen Sie den Wert des oberen Rands eines <p>-Elements ab:
var x = document.getElementById("myP").style.borderTop;
Verwandte Seiten
CSS-Tutorial: CSS-Tutorial
CSS-Referenz: CSS-Eigenschaften
HTML-DOM-Referenz: Style-Objektreferenz
HTML-Referenz: HTML-<style>-Tag
❮ Elementobjekt