Easy Tutorial
❮ Prop Doc Referrer Prop Ol Reversed ❯

HTML DOM Style Object


Style Object

The Style object represents an individual style declaration.

Accessing Style Objects

Style objects can be accessed from the document's head section or from a specified HTML element.

Accessing a style object from the document's head section:

Accessing a style object from a specified element:

Creating Style Objects

You can create a <style> element using the document.createElement() method:

You can also set the style property of an existing element:

Style Object Properties

The "CSS" column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3).

Property Description CSS
alignContent Sets or returns the alignment between the lines inside a flexible container when the items do not use all available space (horizontal). 3
alignItems Sets or returns the alignment for items inside a flexible container. 3
alignSelf Sets or returns the alignment for selected items inside a flexible container. 3
animation A shorthand property for all the animation* properties, except animationPlayState. 3
animationDelay Sets or returns when the animation will start. 3
animationDirection Sets or returns whether the animation should play in reverse on alternate cycles. 3
animationDuration Sets or returns how many seconds or milliseconds an animation takes to complete one cycle. 3
animationFillMode Sets or returns what styles will apply for the element when the animation is not playing (when it is finished, or when it has a delay). 3
animationIterationCount Sets or returns the number of times an animation should be played. 3
animationName Sets or returns the name of the @keyframes animation. 3
animationTimingFunction Sets or returns the speed curve of the animation. 3
animationPlayState Sets or returns whether the animation is running or paused. 3
background Sets or returns all the background properties in one declaration. 1
backgroundAttachment Sets or returns whether the background image is fixed or scrolls with the page. 1
backgroundColor Sets or returns the background color of an element. 1
backgroundImage Sets or returns the background image of an element. 1
backgroundPosition Sets or returns the starting position of the background image. 1
backgroundRepeat Sets or returns how to repeat the background image. 1
backgroundClip Sets or returns the painting area of the background. 3
backgroundOrigin Sets or returns the positioning area of the background image. 3
backgroundSize Sets or returns the size of the background image. 3
backfaceVisibility Sets or returns whether or not an element should be visible when not facing the screen. 3
border Sets or returns borderWidth, borderStyle, and borderColor in one declaration. 1
borderBottom Sets or returns all the borderBottom* properties in one declaration. 1
borderBottomColor Sets or returns the color of the bottom border. 1
borderBottomLeftRadius Sets or returns the shape of the bottom-left border corner. 3
borderBottomRightRadius Sets or returns the shape of the bottom-right border corner. 3
borderBottomStyle Sets or returns the style of the bottom border. 1
borderBottomWidth Sets or returns the width of the bottom border. 1
borderCollapse Sets or returns whether the table borders should be collapsed into a single border. 2
borderColor Sets or returns the color of the border (can have up to four values). 1
borderImage A shorthand property for setting or returning all the borderImage* properties. 3
borderImageOutset Sets or returns the amount by which the border image area extends beyond the border box. 3
borderImageRepeat Sets or returns whether the image-border should be repeated, rounded or stretched. 3
borderImageSlice Sets or returns the inward offsets of the image-border. 3
borderImageSource Sets or returns the image to be used as a border. 3
borderImageWidth Sets or returns the width of the image-border. 3
borderLeft Sets or returns all the borderLeft* properties in one declaration. 1
borderLeftColor Sets or returns the color of the left border. 1
borderLeftStyle Sets or returns the style of the left border. 1
borderLeftWidth Sets or returns the width of the left border. 1
borderRadius A shorthand property for setting or returning the four border*Radius properties. 3
borderRight Sets or returns all the borderRight* properties in one declaration. 1
borderRightColor Sets or returns the color of the right border. 1
borderRightStyle Sets or returns the style of the right border. 1
borderRightWidth Sets or returns the width of the right border. 1
borderSpacing Sets or returns the distance between the borders of adjacent cells in a table. 2
borderStyle Sets or returns the style of the border (can have up to four values). 1
borderTop Sets or returns all the borderTop* properties in one declaration. 1
borderTopColor Sets or returns the color of the top border. 1
borderTopLeftRadius Sets or returns the shape of the top-left border corner. 3
borderTopRightRadius Sets or returns the shape of the top-right border corner. 3
borderTopStyle Sets or returns the style of the top border. 1
borderTopWidth Sets or returns the width of the top border. 1
borderWidth Sets or returns the width of the border (can have up to four values). 1
bottom Sets or returns the bottom position of a positioned element. 2
boxDecorationBreak Sets or returns the background and border behavior of an element at page breaks, or for inline elements, at line breaks. 3
boxShadow Sets or returns the drop shadow of an element. 3
boxSizing Allows you to define how the dimensions of an element are calculated. 3
captionSide Sets or returns the position of the table caption. 2
clear Sets or returns the position of the element relative to floating objects. 1
clip Sets or returns the visible part of a positioned element. 2
color Sets or returns the color of the text. 1
columnCount Sets or returns the number of columns an element should be divided into. 3
columnFill Sets or returns how to fill columns. 3
columnGap Sets or returns the gap between the columns. 3
columnRule A shorthand property for setting all the columnRule* properties. 3
columnRuleColor Sets or returns the color of the rule between columns. 3
columnRuleStyle Sets or returns the style of the rule between columns. 3
columnRuleWidth Sets or returns the width of the rule between columns. 3
columns A shorthand property for setting columnWidth and columnCount. 3
columnSpan Sets or returns how many columns an element should span across. 3
columnWidth Sets or returns the width of the columns. 3
content Used with the :before and :after pseudo-elements to insert generated content. 2
counterIncrement Increments one or more counters. 2
counterReset Creates or resets one or more counters. 2
cursor Sets or returns the type of cursor to display for the mouse pointer. 2
direction Sets or returns the text direction. 2
display Sets or returns the display type of an element. 1
emptyCells Sets or returns whether to show the border and background of empty cells in a table. 2
filter Sets or returns image filters (visual effects, such as blur and saturation). 3
flex Sets or returns the length of the item, relative to the rest of the flexible items inside the same container. 3
flexBasis Sets or returns the initial length of a flexible item. 3
flexDirection Sets or returns the direction of the flexible items. 3
flexFlow A shorthand property for the flexDirection and flexWrap properties. 3
flexGrow Sets or returns how much the item will grow relative to the rest of the flexible items inside the same container. 3
flexShrink Sets or returns how the item will shrink relative to the rest of the flexible items inside the same container. 3
flexWrap Sets or returns whether the flexible items should wrap. 3
cssFloat Sets or returns the horizontal alignment of an element. 1
font Sets or returns fontStyle, fontVariant, fontWeight, fontSize, lineHeight, and fontFamily in one declaration. 1
fontFamily Sets or returns the font of the text. 1
fontSize Sets or returns the font size of the text. 1
fontStyle Sets or returns whether the style of the font is normal, italic, or oblique. 1
fontVariant Sets or returns whether the font should be displayed in small capital letters. 1
fontWeight Sets or returns the boldness of the font. 1
fontSizeAdjust Ensures readability of text when the primary font is not available. 3
fontStretch Selects a normal, condensed, or expanded face from a font family. 3
hangingPunctuation Specifies whether a punctuation mark may be placed outside the line box. 3
height Sets or returns the height of an element. 1
hyphens Sets how to split words to improve the layout of paragraphs. 3
icon Provides the author the ability to style an element with an equivalent icon. 3
imageOrientation Specifies the clockwise rotation of the image that the user agent applies. 3
justifyContent Sets or returns the alignment between the items inside a flexible container when the items do not use all available space. 3
left Sets or returns the left position of a positioned element. 2
letterSpacing Sets or returns the space between characters in the text. 1
lineHeight Sets or returns the distance between lines in the text. 1
listStyle Sets or returns listStyleImage, listStylePosition, and listStyleType in one declaration. 1
listStyleImage Sets or returns an image as the list-item marker. 1
listStylePosition Sets or returns the position of the list-item markers. 1
listStyleType Sets or returns the type of list-item marker. 1
margin Sets or returns the margins of an element (can have up to four values). 1
marginBottom Sets or returns the bottom margin of an element. 1
marginLeft Sets or returns the left margin of an element. 1
marginRight Sets or returns the right margin of an element. 1
marginTop Sets or returns the top margin of an element. 1
maxHeight Sets or returns the maximum height of an element. 2
maxWidth Sets or returns the maximum width of an element. 2
minHeight Sets or returns the minimum height of an element. 2
minWidth Sets or returns the minimum width of an element. 2
navDown Sets or returns where to navigate when using the down arrow navigation key. 3
navIndex Sets or returns the tabbing order for an element. 3
navLeft Sets or returns where to navigate when using the left arrow navigation key. 3
navRight Sets or returns where to navigate when using the right arrow navigation key. 3
navUp Sets or returns where to navigate when using the up arrow navigation key. 3
opacity Sets or returns the opacity level for an element. 3
order Sets or returns the order of a flexible item relative to the rest of the flexible items inside the same container. 3
orphans Sets or returns the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element. 2
outline Sets or returns all the outline properties in one declaration. 2
outlineColor Sets or returns the color of the outline around an element. 2
outlineOffset Offsets an outline, and draws it beyond the border edge. 3
outlineStyle Sets or returns the style of the outline around an element. 2
outlineWidth Sets or returns the width of the outline around an element. 2
overflow Sets or returns what to do with content that renders outside the element box. 2
overflowX Specifies whether to clip the left/right edges of the content, if it overflows the element's content area. 3
overflowY Specifies whether to clip the top/bottom edges of the content, if it overflows the element's content area. 3
padding Sets or returns the padding of an element (can have up to four values). 1
paddingBottom Sets or returns the bottom padding of an element. 1
paddingLeft Sets or returns the left padding of an element. 1
paddingRight Sets or returns the right padding of an element. 1
paddingTop Sets or returns the top padding of an element. 1
pageBreakAfter Sets or returns the page-break behavior after an element. 2
pageBreakBefore Sets or returns the page-break behavior before an element. 2
pageBreakInside Sets or returns the page-break behavior inside an element. 2
perspective Sets or returns the perspective on how 3D elements are viewed. 3
perspectiveOrigin Sets or returns the bottom position of 3D elements. 3
position Sets or returns the type of positioning method used for an element (static, relative, absolute, or fixed). 2
quotes Sets or returns the type of quotation marks for embedded quotations. 2
resize Sets or returns whether an element is resizable by the user. 3
right Sets or returns the right position of a positioned element. 2
tableLayout Sets or returns the layout of cells, rows, and columns in a table. 2
tabSize Sets or returns the length of the tab character. 3
textAlign Sets or returns the horizontal alignment of text. 1
textAlignLast Sets or returns how to align the last line of a forced line break when the text-align property is set to "justify". 3
textDecoration Sets or returns the decoration of the text. 1
textDecorationColor Sets or returns the color of the text decoration. 3
textDecorationLine Sets or returns the type of line to use for text decoration. 3
textDecorationStyle Sets or returns the style of the line in the text decoration. 3
textIndent Sets or returns the indentation of the first line of text. 1
textJustify Sets or returns the justification method used when the text-align property is set to "justify". 3
textOverflow Sets or returns what should happen when text overflows the containing element. 3
textShadow Sets or returns the shadow effect of the text. 3
textTransform Sets or returns the capitalization of the text. 1
top Sets or returns the top position of a positioned element. 2
transform Applies a 2D or 3D transformation to an element. 3
transformOrigin Sets or returns the position of transformed elements. 3
transformStyle Sets or returns how nested elements are rendered in 3D space. 3
transition A shorthand property for setting or returning the four transition properties. 3
transitionProperty The name of the CSS property to which the transition effect is applied. 3
transitionDuration Sets or returns the time it takes for a transition effect to complete (in seconds or milliseconds). 3
transitionTimingFunction Sets or returns the speed curve of the transition effect. 3
transitionDelay Sets or returns when the transition effect will start. 3
unicodeBidi Sets or returns whether the text should be overridden to support multiple languages in the same document. 2
verticalAlign Sets or returns the vertical alignment of the content in an element. 1
visibility Sets or returns whether an element should be visible. 2
whiteSpace Sets or returns how to handle tabs, line breaks, and spaces in text. 1
width Sets or returns the width of an element. 1
wordBreak Sets or returns the breaking rules for non-CJK languages. 3
wordSpacing Sets or returns the space between words in a text. 1
wordWrap Allows long words or URLs to be able to break and wrap onto the next line. 3
widows Sets or returns the minimum number of visible lines of an element at the top of a page. 2
zIndex Sets or returns the stack order of a positioned element. 2
❮ Prop Doc Referrer Prop Ol Reversed ❯