Beispiel
Fügen Sie eine rote Farbe auf ein <h1> Element:
document.getElementById("myH1").style.color = "red"; Bevor Sie den Stil Einstellung:
Hello World!
Nach dem Einstellen des Stils:
Hello World!
Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Der Stil-Eigenschaft gibt ein CSSStyleDeclaration Objekt, das ein Element der Stil-Attribut darstellt.
Die Stil-Eigenschaft wird mit verschiedenen CSS-Eigenschaften zu erhalten oder einen bestimmten Stil eines Elements gesetzt.
Hinweis: Es ist nicht möglich Stile festlegen , indem Sie eine Zeichenfolge an der Stil - Eigenschaft zuweisen, zB Element .style = "color: red;" . Um den Stil eines Elements gesetzt, fügen Sie ein "CSS" Eigenschaft auf Stil und Wert angeben, wie folgt aus :
element .style.backgroundColor = "red"; // set the background color of an element to red Try it
Wie Sie die JavaScript - Syntax zur Einstellung CSS - Eigenschaften sehen können, ist etwas anders als CSS (backgroundColor instead of background-color) .
Eine Liste aller verfügbaren Eigenschaften, unsere sehen Stil Object Reference .
Hinweis: Die Stil - Eigenschaft gibt nur die CSS - Deklarationen setzen in dem Inline - Stil - Attribute des Elements, zB
<P style = "color: red;">. Es ist nicht möglich , diese Eigenschaft zu nutzen , um Informationen über den Stil Regeln aus dem bekommen <head> Abschnitt in dem Dokument oder externen Stylesheets.
Sie können jedoch Zugriff auf das <style> Element von <head> Dokument verwenden. getElementsByTagName() :
var x = document.getElementsByTagName("STYLE")[0]; // get the first
<style> element Try it
Hinweis: Es wird empfohlen, die Stil - Eigenschaft verwendet wird anstelle des element . setAttribute("style", "...") Methode, weil der Stil - Eigenschaft wird nicht andere CSS - Eigenschaften überschreiben , die in dem festgelegt werden kann , style - Attribut.
Browser-Unterstützung
| Eigentum | |||||
|---|---|---|---|---|---|
| style | Ja | Ja | Ja | Ja | Ja |
Syntax
Return Stil Eigenschaften:
element .style. property Set-Stil Eigenschaften:
element .style. property = value Eigenschaftswerte
| Wert | Beschreibung |
|---|---|
| value | Gibt den Wert der angegebenen Eigenschaft. Zum Beispiel für die borderBottom Eigenschaft: Element .style.borderBottom = "2px festes red"; |
Technische Details
| Rückgabewert: | Ein CSSStyleDeclaration Objekt entspricht ein style-Attribut des Elements |
|---|---|
| DOM Version | Dom Ebene 2 CSS |
Mehr Beispiele
Beispiel
Holen Sie sich den Wert der <p> Element auf der obersten Grenze:
var x = document.getElementById("myP").style.borderTop;Das Ergebnis von x wird sein:
5px solid red Versuch es selber " Verwandte Seiten
CSS Tutorial: CSS Tutorial
CSS Referenz: CSS - Eigenschaften
HTML DOM Referenz: Stil Object Reference
HTML Referenz: HTML <style> -Tag
<Element Object