HTML DOM StyleObjekt

Style-Objekt

Das Style-Objekt repräsentiert eine einzelne Stildeklaration.

Zugriff auf das Style-Objekt

Auf das Style-Objekt kann vom Kopfbereich eines Dokuments oder von einem angegebenen HTML-Element aus zugegriffen werden.

Zugriff auf das Style-Objekt aus dem Kopfbereich eines Dokuments:

var x = document.getElementsByTagName("STYLE"); Probieren Sie es selbst aus

Zugriff auf das Style-Objekt eines angegebenen Elements:

var x = document.getElementById("myH1").style; Probieren Sie es selbst aus

Ein Style-Objekt erstellen

Sie können die Methode document.createElement() verwenden, um ein <style>-Element zu erstellen:

var x = document.createElement("STYLE"); Probieren Sie es selbst aus

Sie können auch die style-Eigenschaft eines vorhandenen Elements festlegen:

document.getElementById("myH1").style.color = "red"; Probieren Sie es selbst aus

Style-Objekt-Eigenschaften

Die Spalte "CSS" gibt an, in welcher CSS-Version die Eigenschaft definiert ist (CSS1, CSS2 oder CSS3).

Eigenschaft Beschreibung CSS
alignContent Legt fest oder gibt die Ausrichtung (horizontal) zwischen Elementen zurück, wenn die Elemente in einem flexiblen Container nicht den gesamten verfügbaren Platz einnehmen. 3
alignItems Legt fest oder gibt die Ausrichtung der Elemente in einem flexiblen Container zurück. 3
alignSelf Legt fest oder gibt die Ausrichtung des ausgewählten Elements in einem flexiblen Container zurück. 3
animation Ist eine Kurzschreibweise für die folgenden Eigenschaften, außer der Eigenschaft animationPlayState. 3
animationDelay Legt fest oder gibt zurück, wann die Animation startet. 3
animationDirection Legt fest oder gibt zurück, ob die Animation in Schleifen abwechselnd rückwärts abgespielt wird. 3
animationDuration Legt fest oder gibt die Anzahl der Sekunden oder Millisekunden zurück, die die Animation bis zum Abschluss benötigt. 3
animationFillMode Legt den Stil fest, der auf das Element angewendet wird, wenn die Animation nicht läuft (wenn die Animation abgeschlossen ist oder wenn die Animation eine Verzögerung hat, die noch nicht begonnen hat), oder gibt ihn zurück. 3
animationIterationCount Legt fest oder gibt zurück, wie oft die Animation abgespielt wird. 3
animationName Legt den Namen der @keyframes-Animation fest oder gibt ihn zurück. 3
animationTimingFunction Legt die Geschwindigkeitskurve der Animation fest oder gibt sie zurück. 3
animationPlayState Legt fest oder gibt zurück, ob die Animation läuft oder pausiert ist. 3
background Legt alle Hintergrund-Eigenschaften in einer Deklaration fest oder gibt sie zurück. 1
backgroundAttachment Legt fest oder gibt zurück, ob das Hintergrundbild fixiert ist oder mit der Seite scrollt. 1
backgroundColor Legt die Hintergrundfarbe eines Elements fest oder gibt sie zurück. 1
backgroundImage Legt das Hintergrundbild eines Elements fest oder gibt es zurück. 1
backgroundPosition Legt die Startposition des Hintergrundbilds fest oder gibt sie zurück. 1
backgroundRepeat Legt fest oder gibt zurück, wie das Hintergrundbild wiederholt wird. 1
backgroundClip Legt den Malbereich des Hintergrunds fest oder gibt ihn zurück. 3
backgroundOrigin Legt den Positionierungsbereich des Hintergrundbilds fest oder gibt ihn zurück. 3
backgroundSize Legt die Größe des Hintergrundbilds fest oder gibt sie zurück. 3
backfaceVisibility Legt fest oder gibt zurück, ob ein Element sichtbar ist, wenn es vom Bildschirm abgewandt ist. 3
border Legt borderWidth, borderStyle und borderColor in einer Deklaration fest oder gibt sie zurück. 1
borderBottom Legt alle borderBottom*-Eigenschaften in einer Deklaration fest oder gibt sie zurück. 1
borderBottomColor Legt die Farbe des unteren Rahmens fest oder gibt sie zurück. 1 
borderBottomLeftRadius Legt die Form des Rahmens der unteren linken Ecke fest oder gibt sie zurück. 3
borderBottomRightRadius Legt die Form des Rahmens der unteren rechten Ecke fest oder gibt sie zurück. 3
borderBottomStyle Legt den Stil des unteren Rahmens fest oder gibt ihn zurück. 1
borderBottomWidth Legt die Breite des unteren Rahmens fest oder gibt sie zurück. 1
borderCollapse Legt fest oder gibt zurück, ob der Tabellenrahmen zu einem einzelnen Rahmen zusammengefasst wird. 2
borderColor Legt die Farbe des Rahmens eines Elements fest oder gibt sie zurück (kann bis zu vier Werte haben). 1
borderImage Eine Kurzschreibweise zum Festlegen oder Zurückgeben aller borderImage*-Eigenschaften. 3
borderImageOutset Legt den Betrag fest oder gibt ihn zurück, um den der Rahmenbildbereich über die Rahmenbox hinausragt. 3
borderImageRepeat Legt fest oder gibt zurück, ob der Bildrahmen gekachelt oder gestreckt wird. 3
borderImageSlice Legt die nach innen gerichteten Versätze des Bildrahmens fest oder gibt sie zurück. 3
borderImageSource Legt das als Rahmen zu verwendende Bild fest oder gibt es zurück. 3
borderImageWidth Legt die Breite des Bildrahmens fest oder gibt sie zurück. 3
borderLeft Legt alle borderLeft*-Eigenschaften in einer einzigen Deklaration fest oder gibt sie zurück. 1
borderLeftColor Legt die Farbe des linken Rahmens fest oder gibt sie zurück. 1
borderLeftStyle Legt den Stil des linken Rahmens fest oder gibt sie zurück. 1
borderLeftWidth Legt die Breite des linken Rahmens fest oder gibt sie zurück. 1
borderRadius Eine Kurzschreibweise zum Festlegen oder Zurückgeben der vier border*Radius-Eigenschaften. 3
borderRight Legt alle borderRight*-Eigenschaften in einer Deklaration fest oder gibt sie zurück. 1
borderRightColor Legt die Farbe des rechten Rahmens fest oder gibt sie zurück. 1
borderRightStyle Legt den Stil des rechten Rahmens fest oder gibt ihn zurück. 1
borderRightWidth Legt die Breite des rechten Rahmens fest oder gibt sie zurück. 1
borderSpacing Legt den Abstand zwischen Zellen in einer Tabelle fest oder gibt ihn zurück. 2
borderStyle Legt den Stil des Rahmens eines Elements fest oder gibt ihn zurück (kann bis zu vier Werte haben). 1
borderTop Legt alle borderTop*-Eigenschaften in einer Deklaration fest oder gibt sie zurück. 1
borderTopColor Legt die Farbe des oberen Rahmens fest oder gibt sie zurück. 1
borderTopLeftRadius Legt die Form der oberen linken Rahmenecke fest oder gibt sie zurück. 3
borderTopRightRadius Legt die Form der oberen rechten Rahmenecke fest oder gibt sie zurück. 3
borderTopStyle Legt den Stil des oberen Rahmens fest oder gibt ihn zurück. 1
borderTopWidth Legt die Breite des oberen Rahmens fest oder gibt sie zurück. 1
borderWidth Legt die Breite des Rahmens eines Elements fest oder gibt sie zurück (kann bis zu vier Werte haben). 1
bottom Legt die untere Position eines positionierten Elements fest oder gibt sie zurück. 2
boxDecorationBreak Legt das Verhalten des Hintergrunds und des Rahmens eines Elements an einem Seitenumbruch oder eines Inline-Elements an einem Zeilenumbruch fest oder gibt es zurück. 3
boxShadow Legt den Schlagschatten eines Elements fest oder gibt ihn zurück. 3
boxSizing Ermöglicht es Ihnen, bestimmte Elemente so zu definieren, dass sie auf eine bestimmte Weise zu einem bestimmten Bereich passen. 3
captionSide Legt die Position der Tabellenbeschriftung fest oder gibt sie zurück. 2
clear Legt die Position eines Elements relativ zu schwebenden Objekten fest oder gibt sie zurück. 1
clip Legt den sichtbaren Teil eines positionierten Elements fest oder gibt ihn zurück. 2
color Legt die Farbe des Textes fest oder gibt sie zurück. 1
columnCount Legt fest oder gibt die Anzahl der Spalten zurück, in die ein Element unterteilt werden soll. 3
columnFill Legt fest oder gibt zurück, wie Spalten gefüllt werden. 3
columnGap Legt den Abstand zwischen Spalten fest oder gibt ihn zurück. 3
columnRule Eine Kurzschreibweise zum Festlegen oder Zurückgeben aller columnRule*-Eigenschaften. 3
columnRuleColor Legt die Farbe der Linie zwischen Spalten fest oder gibt sie zurück. 3
columnRuleStyle Legt den Stil der Linie zwischen Spalten fest oder gibt ihn zurück. 3
columnRuleWidth Legt die Breitenregel zwischen Spalten fest oder gibt sie zurück. 3
columns Eine Kurzschreibweise zum Festlegen oder Zurückgeben von columnWidth und columnCount. 3
columnSpan Legt fest oder gibt zurück, wie viele Spalten ein Element überspannen soll. 3
columnWidth Legt die Breite der Spalten fest oder gibt sie zurück. 3
content Wird zusammen mit den Pseudoelementen :before und :after verwendet, um generierten Inhalt einzufügen. 2
counterIncrement Erhöht einen oder mehrere Zähler. 2
counterReset Erstellt oder setzt einen oder mehrere Zähler zurück. 2
cursor Legt den Typ des Cursors fest, der für den Mauszeiger angezeigt werden soll, oder gibt ihn zurück. 2
direction Legt die Richtung des Textes fest oder gibt sie zurück. 2
display Legt den Anzeigetyp eines Elements fest oder gibt ihn zurück. 1
emptyCells Legt fest oder gibt zurück, ob Rahmen und Hintergrund für leere Zellen in einer Tabelle angezeigt werden. 2
filter Legt den Bildfilter fest oder gibt ihn zurück (visuelle Effekte wie Gaußscher Weichzeichner und Sättigung). 3
flex Legt die Länge des Elements relativ zu anderen flexiblen Elementen im selben Container fest oder gibt sie zurück. 3
flexBasis Legt die Anfangslänge eines flexiblen Elements fest oder gibt sie zurück. 3
flexDirection Legt die Richtung der flexiblen Elemente fest oder gibt sie zurück. 3
flexFlow Ist eine Kurzschreibweise für die Eigenschaften flexDirection und flexWrap. 3
flexGrow Legt fest oder gibt zurück, um wie viel das Element relativ zu anderen flexiblen Elementen im selben Container wächst. 3
flexShrink Legt fest oder gibt zurück, um wie viel das Element relativ zu anderen flexiblen Elementen im selben Container schrumpft. 3
flexWrap Legt fest oder gibt zurück, ob die flexiblen Elemente auf mehrere Zeilen oder Spalten umbrechen. 3
cssFloat Legt die horizontale Ausrichtung eines Elements fest oder gibt sie zurück. 1
font Legt fontStyle, fontVariant, fontWeight, fontSize, lineHeight und fontFamily in einer Deklaration fest oder gibt sie zurück. 1
fontFamily Legt die Schriftfamilie des Textes fest oder gibt sie zurück. 1
fontSize Legt die Schriftgröße des Textes fest oder gibt sie zurück. 1
fontStyle Legt fest oder gibt zurück, ob der Schriftstil normal, kursiv oder schräg ist. 1
fontVariant Legt fest oder gibt zurück, ob die Schriftart in Kapitälchen angezeigt wird. 1
fontWeight Legt die Schriftstärke der Schriftart fest oder gibt sie zurück. 1
fontSizeAdjust Stellt die Lesbarkeit von Text sicher, wenn Ersatzschriftarten verwendet werden. 3
fontStretch Wählt eine normale, komprimierte oder erweiterte Schriftart aus einer Schriftbibliothek aus. 3
hangingPunctuation Gibt an, ob ein Satzzeichen außerhalb der Zeilenbox platziert werden darf. 3
height Legt die Höhe eines Elements fest oder gibt sie zurück. 1
hyphens Legt fest, wie Wörter aufgeteilt werden, um das Absatzlayout zu verbessern. 3
icon Bietet Autoren die Möglichkeit, Stile für ein Element zu definieren, das ein äquivalentes Icon besitzt. 3
imageOrientation Gibt eine vom User-Agent auf ein Bild angewendete Drehung im Uhrzeigersinn an. 3
justifyContent Legt die (vertikale) Ausrichtung zwischen Elementen fest oder gibt sie zurück, wenn die Elemente in einem flexiblen Container nicht den gesamten verfügbaren Platz einnehmen. 3
left Legt die linke Position eines positionierten Elements fest oder gibt sie zurück. 2
letterSpacing Legt den Abstand zwischen Zeichen in Text fest oder gibt ihn zurück. 1
lineHeight Legt den Abstand zwischen Zeilen in Text fest oder gibt ihn zurück. 1
listStyle Legt listStyleImage, listStylePosition, listStyleType in einer einzigen Deklaration fest oder gibt sie zurück. 1
listStyleImage Legt das als Aufzählungszeichen verwendete Bild fest oder gibt es zurück. 1
listStylePosition Legt die Position des Aufzählungszeichens fest oder gibt sie zurück. 1
listStyleType Legt den Typ des Aufzählungszeichens fest oder gibt ihn zurück. 1
margin Legt die Außenabstände des Elements fest oder gibt sie zurück (kann bis zu vier Werte annehmen). 1
marginBottom Legt den unteren Außenabstand des Elements fest oder gibt ihn zurück. 1
marginLeft Legt den linken Außenabstand des Elements fest oder gibt ihn zurück. 1
marginRight Legt den rechten Außenabstand des Elements fest oder gibt ihn zurück. 1
marginTop Legt den oberen Außenabstand des Elements fest oder gibt ihn zurück. 1
maxHeight Legt die maximale Höhe des Elements fest oder gibt sie zurück. 2
maxWidth Legt die maximale Breite des Elements fest oder gibt sie zurück. 2
minHeight Legt die minimale Höhe des Elements fest oder gibt sie zurück. 2
minWidth Legt die minimale Breite des Elements fest oder gibt sie zurück. 2
navDown Legt fest oder gibt zurück, wohin navigiert wird, wenn die Navigationstaste für den Pfeil nach unten verwendet wird. 3
navIndex Legt die Anzeigereihenfolge des Elements fest oder gibt sie zurück. 3
navLeft Legt fest oder gibt zurück, wohin navigiert wird, wenn die Navigationstaste für den Pfeil nach links verwendet wird. 3
navRight Legt fest oder gibt zurück, wohin navigiert wird, wenn die Navigationstaste für den Pfeil nach rechts verwendet wird. 3
navUp Legt fest oder gibt zurück, wohin navigiert wird, wenn die Navigationstaste für den Pfeil nach oben verwendet wird. 3
opacity Legt die Deckkraft des Elements fest oder gibt sie zurück. 3
order Legt die Reihenfolge eines flexiblen Elements relativ zu anderen flexiblen Elementen im selben Container fest oder gibt sie zurück. 3
orphans Legt die Mindestanzahl an Zeilen fest oder gibt sie zurück, die am unteren Rand der Seite reserviert werden müssen, wenn ein Seitenumbruch innerhalb des Elements auftritt. 2
outline Legt alle Kontureigenschaften in einer Deklaration fest oder gibt sie zurück. 2
outlineColor Legt die Konturfarbe um ein Element fest oder gibt sie zurück. 2
outlineOffset Versetzt die Kontur und zeichnet sie über die Rahmenkante hinaus. 3
outlineStyle Legt den Konturstil um ein Element fest oder gibt ihn zurück. 2
outlineWidth Legt die Konturbreite um ein Element fest oder gibt sie zurück. 2
overflow Legt fest oder gibt zurück, wie mit Inhalten umgegangen wird, die außerhalb der Elementbox erscheinen. 2
overflowX Gibt an, ob die linken/rechten Kanten des Inhalts beschnitten werden sollen, wenn er den Inhaltsbereich des Elements überläuft. 3
overflowY Gibt an, ob die oberen/unteren Ränder des Inhalts abgeschnitten werden, wenn dieser den Inhaltsbereich des Elements überläuft. 3
padding Legt den Innenabstand des Elements fest oder gibt ihn zurück (kann bis zu vier Werte haben). 1
paddingBottom Legt den unteren Innenabstand des Elements fest oder gibt ihn zurück. 1
paddingLeft Legt den linken Innenabstand des Elements fest oder gibt ihn zurück. 1
paddingRight Legt den rechten Innenabstand des Elements fest oder gibt ihn zurück. 1
paddingTop Legt den oberen Innenabstand des Elements fest oder gibt ihn zurück. 1
pageBreakAfter Legt das Seitenumbruchverhalten nach einem Element fest oder gibt es zurück. 2
pageBreakBefore Legt das Seitenumbruchverhalten vor einem Element fest oder gibt es zurück. 2
pageBreakInside Legt das Seitenumbruchverhalten innerhalb eines Elements fest oder gibt es zurück. 2
perspective Legt die Perspektive fest, aus der ein 3D-Element betrachtet wird, oder gibt sie zurück. 3
perspectiveOrigin Legt die untere Position eines 3D-Elements fest oder gibt sie zurück. 3
position Legt die Art der für das Element verwendeten Positionierungsmethode fest (static, relative, absolute oder fixed) oder gibt sie zurück. 2
quotes Legt die Art der Anführungszeichen fest, die für eingebettete Zitate verwendet werden, oder gibt sie zurück. 2
resize Legt fest oder gibt zurück, ob die Größe des Elements vom Benutzer angepasst werden kann. 3
right Legt die rechte Position eines positionierten Elements fest oder gibt sie zurück. 2
tableLayout Legt die Layoutmethode von Tabellenzellen, -zeilen und -spalten fest oder gibt sie zurück. 2
tabSize Legt die Länge des Tabulatorzeichens (tab) fest oder gibt sie zurück. 3
textAlign Legt die horizontale Ausrichtung von Text fest oder gibt sie zurück. 1
textAlignLast Legt fest oder gibt zurück, wie die letzte Zeile vor einem erzwungenen Zeilenumbruch ausgerichtet wird, wenn die Eigenschaft text-align auf "justify" gesetzt ist. 3
textDecoration Legt die Dekoration von Text fest oder gibt sie zurück. 1
textDecorationColor Legt die Farbe der Textdekoration fest oder gibt sie zurück. 3
textDecorationLine Legt den Linientyp fest, der für die Textdekoration verwendet werden soll, oder gibt ihn zurück. 3
textDecorationStyle Legt den Linienstil in der Textdekoration fest oder gibt ihn zurück. 3
textIndent Legt die Einrückung der ersten Textzeile fest oder gibt sie zurück. 1
textJustify Legt die Ausrichtungsmethode fest oder gibt sie zurück, die verwendet werden soll, wenn die Eigenschaft text-align auf "justify" gesetzt ist. 3
textOverflow Legt fest oder gibt zurück, was geschehen soll, wenn Text das Element überläuft, das ihn enthält. 3
textShadow Legt den Schatteneffekt von Text fest oder gibt ihn zurück. 3
textTransform Legt die Groß-/Kleinschreibung von Text fest oder gibt sie zurück. 1
top Legt die obere Position eines positionierten Elements fest oder gibt sie zurück. 2
transform Wendet eine 2D- oder 3D-Transformation auf ein Element an. 3
transformOrigin Legt die Position des transformierten Elements fest oder gibt sie zurück. 3
transformStyle Legt fest oder gibt zurück, wie verschachtelte Elemente im 3D-Raum gerendert werden. 3
transition Eine Kurzschreibweise-Eigenschaft zum Festlegen oder Zurückgeben von vier Übergangseigenschaften. 3
transitionProperty Der Name der CSS-Eigenschaft, auf die der Übergangseffekt angewendet wird. 3
transitionDuration Legt fest oder gibt zurück, wie viel Zeit (in Sekunden oder Millisekunden) zum Abschließen des Übergangseffekts benötigt wird. 3
transitionTimingFunction Legt die Geschwindigkeitskurve des Übergangseffekts fest oder gibt sie zurück. 3
transitionDelay Legt fest oder gibt zurück, wann der Übergangseffekt beginnt. 3
unicodeBidi Legt fest oder gibt zurück, ob der Text umgeschrieben wird, um mehrere Sprachen im selben Dokument zu unterstützen. 2
verticalAlign Legt die vertikale Ausrichtung des Inhalts innerhalb des Elements fest oder gibt sie zurück. 1
visibility Legt fest oder gibt zurück, ob das Element sichtbar sein soll. 2
whiteSpace Legt fest oder gibt zurück, wie Tabs, Zeilenumbrüche und Leerzeichen im Text behandelt werden. 1
width Legt die Breite des Elements fest oder gibt sie zurück. 1
wordBreak Legt die Zeilenumbruchregeln für Nicht-CJK-Sprachen fest oder gibt sie zurück. 3
wordSpacing Legt den Abstand zwischen Wörtern im Text fest oder gibt ihn zurück. 1
wordWrap Erlaubt, dass lange Wörter oder URL-Adressen in die nächste Zeile umgebrochen werden. 3
widows Legt fest oder gibt zurück, ob sich ein Element oben auf einer Seite befindet. 2
zIndex Legt die Stapelreihenfolge positionierter Elemente fest oder gibt sie zurück. 2
Weitere Erweiterungen