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 |