HTML DOM Style-Objekt

Style-Objekt

Das Style-Objekt repräsentiert eine单独e Stylesheet-Deklaration.

Attribute des Style-Objekts

Eigenschaft Beschreibung
alignContent Setzen oder Rückerhalten der Ausrichtung der Reihen im Flex-Container, wenn die Elemente nicht den gesamten verfügbaren Raum verwenden.
alignItems Setzen oder Rückerhalten der Ausrichtung der Elemente im Flex-Container.
alignSelf Setzen oder Rückerhalten der Ausrichtung des ausgewählten Elements im Flex-Container.
animation Kurzform aller Animationseigenschaften, außer dem animationPlayState-Attribut.
animationDelay Setzen oder Rückerhalten, wann die Animation beginnt.
animationDirection Setzen oder Rückerhalten, ob die Animation im Wechselzyklus rückwärts abgespielt werden soll.
animationDuration Setzen oder Rückerhalten der Anzahl der Sekunden oder Millisekunden, die eine Animation für einen Zyklus benötigt.
animationFillMode Setzen oder Rückerhalten des Wertes, der außerhalb der Ausführungszeit der Animation angewendet wird.
animationIterationCount Setzen oder Rückerhalten der Anzahl der Male, wie die Animation abgespielt werden soll.
animationName Setzen oder Rückerhalten des Namens der @keyframes-Animation.
animationPlayState Setzen oder Rückerhalten, ob die Animation läuft oder pausiert.
animationTimingFunction Setzen oder Rückerhalten der Geschwindigkeitskurve der Animation.
background In einer einzigen Anweisung alle Hintergrundattribute setzen oder rückerhalten.
backgroundAttachment Setzen oder Rückerhalten, ob das Hintergrundbild fix ist oder mit der Seitenscrollung verschoben wird.
backgroundClip Setzen oder Rückerhalten des Zeichengebietes der Hintergrund.
backgroundColor Setzen oder Rückerhalten der Hintergrundfarbe des Elements.
backgroundImage Setzen oder Rückerhalten des Hintergrundbildes des Elements.
backgroundOrigin 设置或返回背景图像的定位区域。
backgroundPosition 设置或返回背景图像的起始位置。
backgroundRepeat Legt oder gibt den Bereich fest, in dem das Hintergrundbild positioniert wird.
backgroundPosition Legt oder gibt den Ausgangspunkt des Hintergrundbildes fest.
backgroundRepeat Legt oder gibt fest, wie das Hintergrundbild wiederholt (tiles) wird.
backgroundSize Legt oder gibt die Größe des Hintergrundbildes fest.
backfaceVisibility Legt oder gibt fest, ob das Element sichtbar ist, wenn es sich nicht zur Bildfläche hin wendet.
borderBottom Legt oder gibt in einer einzigen Erklärung alle borderBottom-Eigenschaften fest.
borderBottomColor Legt oder gibt die Form des linken unteren Rahmenrandes fest.
borderBottomRightRadius Legt oder gibt die Form des linken unteren Rahmenrandes fest.
Legt oder gibt die Form des rechten unteren Rahmenrandes fest. Legt oder gibt den Stil des unteren Rahmenrandes fest.
borderBottomWidth Legt oder gibt die Breite der unteren Rahmenrand fest.
borderCollapse Legt oder gibt fest, ob die Tabellenrahmen zusammengefasst werden sollten, um eine Einzelleiste zu erzeugen.
borderColor Legt oder gibt die Farbe des Elementrahmens fest (bis zu vier Werte können festgelegt werden).
borderImage Kurzschreibweise zum Festlegen oder Zurückgeben aller borderImage-Eigenschaften.
borderImageOutset Legt oder gibt die Menge fest, um die der Bildrahmenbereich über den Rahmenbox hinausgeht.
borderImageRepeat Legt oder gibt fest, ob die Bildrahmen wiederholt, umgeben oder gestreckt werden sollen.
borderImageSlice Legt oder gibt den Innenaussetz der Bildrahmen fest.
borderImageSource Legt oder gibt das Bild fest, das als Rahmen verwendet wird.
borderImageWidth Legt oder gibt die Breite des Bildrahmens fest.
borderLeft Legt oder gibt in einer einzigen Erklärung alle borderLeft-Eigenschaften fest.
borderLeftColor Legt oder gibt die Farbe des linken Rahmenrandes fest.
borderLeftStyle Legt oder gibt den Stil des linken Rahmenrandes fest.
borderLeftWidth Legt oder gibt die Breite des linken Rahmenrandes fest.
borderRadius Kurzschreibweise zum Festlegen oder Zurückgeben aller vier borderRadius-Eigenschaften.
borderRight Legt oder gibt in einer einzigen Erklärung alle borderRight-Eigenschaften fest.
borderRightColor Legt oder gibt die Farbe des rechten Rahmenrandes fest.
borderRightStyle 设置或返回右边框的样式。
borderRightWidth 设置或返回右边框的宽度。
borderSpacing 设置或返回表格中单元格之间的空间。
borderStyle 设置或返回元素边框的样式（最多可以设置四个值）。
borderTop 在一条声明中设置或返回所有 borderTop 属性。
borderTopColor 设置或返回上边框的颜色。
borderTopLeftRadius 设置或返回左上角边框的形状。
borderTopRightRadius 设置或返回右上角边框的形状。
borderTopStyle 设置或返回上边框的样式。
borderTopWidth 设置或返回上边框的宽度。
borderWidth 设置或返回元素边框的宽度（最多可以设置四个值）。
bottom 设置或返回定位元素的底部位置。
boxDecorationBreak 设置或返回元素在分页时的背景和边框的行为，或者对于行内元素，在换行时的行为。
boxShadow 将一个或多个阴影附加到框（box）。
boxSizing 允许您定义某些元素以某种方式适合某个区域。
captionSide 设置或返回表格标题的位置。
caretColor 设置或返回元素的插入符号/光标的颜色。
clear 设置或返回元素相对于浮动对象的位置。
clip 设置或返回定位元素的哪一部分可见。
color 设置或返回文本的颜色。
columnCount 设置或返回元素应该被划分的列数。
columnFill 设置或返回如何填充列。
columnGap 设置或返回列之间的间隙。
columnRule 用于设置或返回所有 columnRule 属性的简写属性。
columnRuleColor 设置或返回列之间规则的颜色。
columnRuleStyle 设置或返回列之间规则的样式。
columnRuleWidth 设置或返回列之间规则的宽度。
columns 用于设置或返回 columnWidth 和 columnCount 的简写属性。
columnSpan 设置或返回元素应该跨越多少列。
columnWidth 设置或返回列的宽度。
content Used with :before and :after pseudo-elements to insert generated content.
counterIncrement Increment one or more counters.
counterReset Create or reset one or more counters.
cursor Set or return the cursor type displayed by the mouse pointer.
direction Set or return the text direction.
display Set or return the display type of the element.
emptyCells Set or return whether the border and background of empty cells should be displayed.
filter Set or return the image filter (visual effects such as blur and saturation).
flex Set or return the length of the item, relative to the rest of the content.
flexBasis Set or return the initial length of the elastic item.
flexDirection Set or return the direction of the elastic item.
flexFlow Abbreviated properties of flexDirection and flexWrap.
flexGrow Set or return the growth amount of the item relative to other items.
flexShrink Set or return the shrinkage method of the item relative to other items.
flexWrap Set or return whether the elastic item should be wrapped.
cssFloat Set or return the horizontal alignment method of the element.
font Set or return font properties in a single declaration.
fontFamily Set or return the font family of the text.
fontSize Set or return the font size of the text.
fontStyle Set or return whether the font style is normal, italic, or oblique.
fontVariant Set or return whether the font should be displayed in small capitals.
fontWeight Set or return the thickness of the font.
fontSizeAdjust Maintain the readability of the text when font fallback occurs.
fontStretch Select the stretching deformation method from the character set.
hangingPunctuation Specify whether punctuation marks can be placed outside the line box.
height Set or return the height of the element.
hyphens Set how to split words to improve the layout of the paragraph.
icon Enable the author to use iconic equivalents to set the style of the element.
imageOrientation Specify the rotation of the user agent applied to the image in the right or clockwise direction.
isolation Define whether an element must create new stacking content.
justifyContent Set or return the alignment method between items within an elastic container when the item does not use all available space.
left Set or return the left position of the定位element.
letterSpacing Einstellen oder zurückgeben des Abstands zwischen den Zeichen im Text.
lineHeight Einstellen oder zurückgeben des Abstands zwischen den Zeilen im Text.
listStyle In einer einzigen Anweisung einstellen oder zurückgeben der Liste der Liste der Liste.
listStyleImage Einstellen oder zurückgeben des Bildes als Liste der Liste der Liste.
listStylePosition Einstellen oder zurückgeben der Position der Liste der Liste der Liste.
listStyleType Einstellen oder zurückgeben des Typs der Liste der Liste der Liste.
margin Einstellen oder zurückgeben der Außenmarke des Elements (bis zu vier Werte können festgelegt werden).
marginBottom Einstellen oder zurückgeben der unteren Außenmarke des Elements.
marginLeft Einstellen oder zurückgeben der linken Außenmarke des Elements.
marginRight Einstellen oder zurückgeben der rechten Außenmarke des Elements.
marginTop Einstellen oder zurückgeben der oberen Außenmarke des Elements.
maxHeight Einstellen oder zurückgeben der maximalen Höhe des Elements.
maxWidth Einstellen oder zurückgeben der maximalen Breite des Elements.
minHeight Einstellen oder zurückgeben der minimalen Höhe des Elements.
minWidth Einstellen oder zurückgeben der minimalen Breite des Elements.
navDown Einstellen oder zurückgeben der Navigationposition bei der Verwendung der Pfeiltasten nach unten.
navIndex Einstellen oder zurückgeben der Navigationreihenfolge des Elements.
navLeft Einstellen oder zurückgeben der Navigationposition bei der Verwendung der Pfeiltasten nach links.
navRight Einstellen oder zurückgeben der Navigationposition bei der Verwendung der Pfeiltasten nach rechts.
navUp Einstellen oder zurückgeben der Navigationposition bei der Verwendung der Pfeiltasten nach oben.
objectFit Bestimmen, wie der Inhalt des ersetzen Elements in den Rahmen passt, der durch die verwendete Höhe und Breite erstellt wird.
objectPosition Bestimmen der Ausrichtung des ersetzen Elements innerhalb seines Rahmens.
opacity Einstellen oder zurückgeben des Transparenzniveaus des Elements.
order Einstellen oder zurückgeben der Reihenfolge der flexiblen Elemente relativ zu den übrigen Elementen.
orphans Einstellen oder zurückgeben der minimalen Anzahl der Zeilen, die am unteren Rand der Seite bleiben müssen, wenn eine Seitenaufteilung im Element intern erfolgt.
outline In einer einzigen Anweisung einstellen oder zurückgeben aller Outline-Attribute.
outlineColor Einstellen oder zurückgeben der Farbe des Rahmens um das Element.
outlineOffset Verschieben des Rahmens und Zeichnen desselben außerhalb der Kanten.
outlineStyle Einstellen oder zurückgeben des Stils des Rahmens um das Element.
outlineWidth Einstellen oder zurückgeben der Breite des Rahmens um das Element.
overflow Einstellen oder zurückgeben, wie der Inhalt außerhalb des Rahmens des Elements dargestellt wird.
overflowX Regelung, wie die linken/rechten Ränder des Inhalts behandelt werden, wenn sie den Inhaltsbereich des Elements übersteigen.
overflowY Bestimmen, wie der obere und untere Rand des Inhalts behandelt wird, wenn er das Inhaltsbereich des Elements übersteigt.
padding Einstellen oder zurückschreiben des Innenabstands des Elements (bis zu vier Werte können gesetzt werden).
paddingBottom Einstellen oder zurückschreiben des unteren Innenabstands des Elements.
paddingLeft Einstellen oder zurückschreiben des linken Innenabstands des Elements.
paddingRight Einstellen oder zurückschreiben des rechten Innenabstands des Elements.
paddingTop Einstellen oder zurückschreiben der oberen Innenabstand des Elements.
pageBreakAfter Einstellen oder zurückschreiben des Paginationsverhaltens nach dem Element.
pageBreakBefore Einstellen oder zurückschreiben des Paginationsverhaltens vor dem Element.
pageBreakInside Einstellen oder zurückschreiben des Paginationsverhaltens im Element.
perspective Einstellen oder zurückschreiben der Perspektive, aus der das 3D-Element betrachtet wird.
perspectiveOrigin Einstellen oder zurückschreiben der Position des Elements am Boden des 3D-Elements.
position Einstellen oder zurückschreiben des Typs der Positionsmethode für das Element (statisch, relativ, absolut oder fest).
quotes Einstellen oder zurückschreiben des Typs der Anführungszeichen für eingebettete Anführungszeichen.
resize Einstellen oder zurückschreiben, ob das Element von den Benutzern vergrößert oder verkleinert werden kann.
right Einstellen oder zurückschreiben der rechten Position des positionierten Elements.
scrollBehavior Bestimmen, ob bei einem Klick auf einen Link in einem rollbaren Rahmen eine Animation mit glatter Positionsverlagerung erfolgt, anstatt direkt zu springen.
tableLayout Einstellen oder zurückschreiben der Layoutmethode für Zellen, Zeilen und Spalten der Tabelle.
tabSize Einstellen oder zurückschreiben der Länge des Tabulators.
textAlign Einstellen oder zurückschreiben der horizontalen Ausrichtung des Textes.
textAlignLast Wenn text-align auf "justify" gesetzt ist, einstellen oder zurückschreiben, wie die letzte Zeile des Blocks oder die Zeile vor der erzwungenen Zeilenumbruch ausgerichtet wird.
textDecoration Einstellen oder zurückschreiben der Textdekoration.
textDecorationColor Einstellen oder zurückschreiben der Farbe der Textdekoration.
textDecorationLine Einstellen oder zurückschreiben des Typs der Zeilen in der Textdekoration.
textDecorationStyle Einstellen oder zurückschreiben des Stils der Linien in der Textdekoration.
textIndent Einstellen oder zurückschreiben des Einrückens des ersten Zeilentextes.
textJustify Einstellen oder zurückschreiben des Ausrichtungsmethods, das verwendet wird, wenn text-align auf "justify" gesetzt ist.
textOverflow Einstellen oder zurückschreiben des Verhaltens, das eintritt, wenn der Text aus dem umschließenden Element hinausgeht.
textShadow Einstellen oder zurückschreiben der Schattenwirkung des Textes.
textTransform Stellen Sie oder geben Sie die Groß- und Kleinschreibung des Texts ein.
top Stellen Sie oder geben Sie die obere Position des positionierten Elements ein.
transform Wenden Sie 2D- oder 3D-Transformationen auf das Element an.
transformOrigin Stellen Sie oder geben Sie die Position des transformierten Elements ein.
transformStyle Stellen Sie oder geben Sie die Art der Renderei der eingebetteten Elemente im 3D-Raum ein.
transition Kurzform für die Einstellung oder das Zurückgeben von vier Transformationsattributen.
transitionProperty Stellen Sie oder geben Sie die CSS-Eigenschaften des Übergangs ein.
transitionDuration Stellen Sie oder geben Sie die Anzahl der Sekunden oder Millisekunden ein, die der Übergang dauert.
transitionTimingFunction Stellen Sie oder geben Sie die Geschwindigkeitskurve des Übergangs ein.
transitionDelay Stellen Sie oder geben Sie ein, wann der Übergang beginnt.
unicodeBidi Stellen Sie oder geben Sie ein, ob der Text überdeckt werden sollte, um mehrere Sprachen im selben Dokument zu unterstützen.
userSelect Stellen Sie oder geben Sie ein, ob der Text des Elements ausgewählt werden kann.
verticalAlign Stellen Sie oder geben Sie die vertikale Ausrichtung des Inhalts im Element ein.
visibility Stellen Sie oder geben Sie ein, ob das Element sichtbar sein soll.
whiteSpace Stellen Sie oder geben Sie ein, wie Tabulatoren, Zeilenumbrüche und Leerzeichen im Text behandelt werden sollen.
width Stellen Sie oder geben Sie die Breite des Elements ein.
wordBreak Stellen Sie oder geben Sie die Zeilenumbruchregeln für nicht-CJK-Schriften ein.
wordSpacing Stellen Sie oder geben Sie den Abstand zwischen den Wörtern im Text ein.
wordWrap Ermöglichen Sie das Brechen langer, nicht unterbrechbarer Wörter und das Umsetzen in die nächste Zeile.
widows Stellen Sie oder geben Sie die minimale Anzahl der Zeilen ein, die sichtbar sein müssen, damit das Element oben auf der Seite sichtbar ist.
zIndex Stellen Sie oder geben Sie die Stacksortierung des positionierten Elements ein.

Greifen Sie auf das Stilobjekt zu

Das Stilobjekt kann von der Kopfzeile des Dokuments oder einem spezifischen HTML-Element aus erreicht werden.

Beispiel 1

Greifen Sie von der Kopfzeile des Dokuments auf das Stilobjekt zu:

var x = document.getElementsByTagName("STYLE");

Versuchen Sie es selbst

Beispiel 2

Greifen Sie auf das Stilobjekt eines bestimmten Elements zu:

var x = document.getElementById("myH1").style;

Versuchen Sie es selbst

Erstellen Sie ein Style-Objekt

Beispiel 1

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

var x = document.createElement("STYLE");

Versuchen Sie es selbst

Beispiel 2

Sie können auch die Stilattribute vorhandener Elemente einstellen:

document.getElementById("myH1").style.color = "red";

Versuchen Sie es selbst

Verwandte Seiten

HTML Anleitung:HTML CSS

CSS Anleitung:CSS Anleitung

HTML Referenzhandbuch:HTML <style> Tag

CSS Referenzhandbuch:CSS Eigenschaften