HTML DOM StyleObject
Style Object
The Style object represents an individual style declaration.
Access the Style Object
The Style object can be accessed from the head area of a document, or from a specified HTML element.
Access the style object from the head area of a document:
var x = document.getElementsByTagName("STYLE");
Try it Yourself
Access the style object of a specified element:
var x = document.getElementById("myH1").style;
Try it Yourself
Create a Style Object
You can use the document.createElement() method to create a <style> element:
var x = document.createElement("STYLE");
Try it Yourself
You can also set the style property of an existing element:
document.getElementById("myH1").style.color = "red";
Try it Yourself
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 (horizontal) between items when the items in a flexible container do not occupy all available space. | 3 |
| alignItems | Sets or returns the alignment of items in a flexible container. | 3 |
| alignSelf | Sets or returns the alignment of the selected item in a flexible container. | 3 |
| animation | Is a shorthand property for the properties below, except the animationPlayState property. | 3 |
| animationDelay | Sets or returns when the animation will start. | 3 |
| animationDirection | Sets or returns whether the animation is played in reverse alternately in loops. | 3 |
| animationDuration | Sets or returns the number of seconds or milliseconds the animation takes to complete. | 3 |
| animationFillMode | Sets or returns the style to apply to the element when the animation is not playing (when the animation is complete, or when the animation has a delay that has not started playing). | 3 |
| animationIterationCount | Sets or returns the number of times the animation will play. | 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 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 the background image will be repeated. | 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 an element is visible when it faces away from the screen. | 3 |
| border | Sets or returns borderWidth, borderStyle, and borderColor in one declaration. | 1 |
| borderBottom | Sets or returns all 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 corner border. | 3 |
| borderBottomRightRadius | Sets or returns the shape of the bottom-right corner border. | 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 border is collapsed into a single border. | 2 |
| borderColor | Sets or returns the color of an element's border (can have up to four values). | 1 |
| borderImage | A shorthand property for setting or returning all 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 is tiled 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 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 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 cells in a table. | 2 |
| borderStyle | Sets or returns the style of an element's border (can have up to four values). | 1 |
| borderTop | Sets or returns all 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 corner border. | 3 |
| borderTopRightRadius | Sets or returns the shape of the top-right corner border. | 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 an element's 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 behavior of the background and border of an element at a page break, or of an inline element at a line break. | 3 |
| boxShadow | Sets or returns the drop shadow of an element. | 3 |
| boxSizing | Allows you to define certain elements to match a particular area in a specific way. | 3 |
| captionSide | Sets or returns the position of the table caption. | 2 |
| clear | Sets or returns the position of an 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 columns. | 3 |
| columnRule | A shorthand property for setting or returning all columnRule* properties. | 3 |
| columnRuleColor | Sets or returns the color rule between columns. | 3 |
| columnRuleStyle | Sets or returns the style rule between columns. | 3 |
| columnRuleWidth | Sets or returns the width rule between columns. | 3 |
| columns | A shorthand property for setting or returning columnWidth and columnCount. | 3 |
| columnSpan | Sets or returns how many columns an element should span. | 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 direction of the text. | 2 |
| display | Sets or returns the display type of an element. | 1 |
| emptyCells | Sets or returns whether borders and background are shown for empty cells in a table. | 2 |
| filter | Sets or returns the image filter (visual effects, such as Gaussian blur and saturation). | 3 |
| flex | Sets or returns the length of the item, relative to other flexible items in 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 | Is a shorthand property for the flexDirection and flexWrap properties. | 3 |
| flexGrow | Sets or returns the amount the item will grow relative to other flexible items in the same container. | 3 |
| flexShrink | Sets or returns the amount the item will shrink relative to other flexible items in the same container. | 3 |
| flexWrap | Sets or returns whether the flexible items wrap onto multiple lines or columns. | 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 family of the text. | 1 |
| fontSize | Sets or returns the font size of the text. | 1 |
| fontStyle | Sets or returns whether the font style is normal, italic, or oblique. | 1 |
| fontVariant | Sets or returns whether the font is displayed in small capital letters. | 1 |
| fontWeight | Sets or returns the weight of the font. | 1 |
| fontSizeAdjust | Ensures the readability of text when fallback fonts are used. | 3 |
| fontStretch | Selects a normal, condensed, or expanded font from a font library. | 3 |
| hangingPunctuation | Specifies whether a punctuation character 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 paragraph layout. | 3 |
| icon | Provides authors with the ability to define styles for an element that has an equivalent icon. | 3 |
| imageOrientation | Specifies a clockwise rotation applied to an image by the user agent. | 3 |
| justifyContent | Sets or returns the alignment (vertical) between items when the items in a flexible container do not occupy all available space. | 3 |
| left | Sets or returns the left position of a positioned element. | 2 |
| letterSpacing | Set or return the space between characters in text. | 1 |
| lineHeight | Set or return the distance between lines in text. | 1 |
| listStyle | Set or return the listStyleImage, listStylePosition, and listStyleType in one declaration. | 1 |
| listStyleImage | Set or return the image used as a list item marker. | 1 |
| listStylePosition | Set or return the position of the list item marker. | 1 |
| listStyleType | Set or return the type of list item marker. | 1 |
| margin | Set or return the element's margins (can have up to four values). | 1 |
| marginBottom | Set or return the element's bottom margin. | 1 |
| marginLeft | Set or return the element's left margin. | 1 |
| marginRight | Set or return the element's right margin. | 1 |
| marginTop | Set or return the element's top margin. | 1 |
| maxHeight | Set or return the element's maximum height. | 2 |
| maxWidth | Set or return the element's maximum width. | 2 |
| minHeight | Set or return the element's minimum height. | 2 |
| minWidth | Set or return the element's minimum width. | 2 |
| navDown | Set or return where to navigate when using the down arrow navigation key. | 3 |
| navIndex | Set or return the display order of the element. | 3 |
| navLeft | Set or return where to navigate when using the left arrow navigation key. | 3 |
| navRight | Set or return where to navigate when using the right arrow navigation key. | 3 |
| navUp | Set or return where to navigate when using the up arrow navigation key. | 3 |
| opacity | Set or return the opacity of the element. | 3 |
| order | Set or return the order of a flexible item relative to other flexible items in the same container. | 3 |
| orphans | Set or return the minimum number of lines that must be reserved at the bottom of the page when a page break occurs within the element. | 2 |
| outline | Set or return all outline properties in one declaration. | 2 |
| outlineColor | Set or return the outline color around an element. | 2 |
| outlineOffset | Offset the outline and draw it beyond the border edge. | 3 |
| outlineStyle | Set or return the outline style around an element. | 2 |
| outlineWidth | Set or return the outline width around an element. | 2 |
| overflow | Set or return how to handle content that appears outside the element's box. | 2 |
| overflowX | Specifies whether to clip the left/right edges of the content when it overflows the element's content area. | 3 |
| overflowY | Specifies whether to clip the top/bottom edges of the content when it overflows the element's content area. | 3 |
| padding | Set or return the element's padding (can have up to four values). | 1 |
| paddingBottom | Set or return the element's bottom padding. | 1 |
| paddingLeft | Set or return the element's left padding. | 1 |
| paddingRight | Set or return the element's right padding. | 1 |
| paddingTop | Set or return the element's top padding. | 1 |
| pageBreakAfter | Set or return the page break behavior after an element. | 2 |
| pageBreakBefore | Set or return the page break behavior before an element. | 2 |
| pageBreakInside | Set or return the page break behavior within an element. | 2 |
| perspective | Set or return the perspective from which a 3D element is viewed. | 3 |
| perspectiveOrigin | Set or return the bottom position of a 3D element. | 3 |
| position | Set or return the type of positioning method used for the element (static, relative, absolute, or fixed). | 2 |
| quotes | Set or return the type of quotes used for embedded quotations. | 2 |
| resize | Set or return whether the element's size can be adjusted by the user. | 3 |
| right | Set or return the right position of a positioned element. | 2 |
| tableLayout | Set or return the layout method of table cells, rows, and columns. | 2 |
| tabSize | Set or return the length of the tab (tab) character. | 3 |
| textAlign | Set or return the horizontal alignment of text. | 1 |
| textAlignLast | Set or return how the last line before a forced line break is aligned when the text-align property is set to "justify". | 3 |
| textDecoration | Set or return the decoration of text. | 1 |
| textDecorationColor | Set or return the color of the text decoration. | 3 |
| textDecorationLine | Set or return the line type to be used for text decoration. | 3 |
| textDecorationStyle | Set or return the line style in text decoration. | 3 |
| textIndent | Set or return the indentation of the first line of text. | 1 |
| textJustify | Set or return the alignment method to use when the text-align property is set to "justify". | 3 |
| textOverflow | Set or return what should happen when text overflows the element that contains it. | 3 |
| textShadow | Set or return the shadow effect of text. | 3 |
| textTransform | Set or return the capitalization of text. | 1 |
| top | Set or return the top position of a positioned element. | 2 |
| transform | Apply a 2D or 3D transformation to an element. | 3 |
| transformOrigin | Set or return the position of the transformed element. | 3 |
| transformStyle | Set or return how nested elements are rendered in 3D space. | 3 |
| transition | A shorthand property for setting or returning four transition properties. | 3 |
| transitionProperty | The name of the CSS property to which the transition effect is applied. | 3 |
| transitionDuration | Set or return the time (in seconds or milliseconds) it takes to complete the transition effect. | 3 |
| transitionTimingFunction | Set or return the speed curve of the transition effect. | 3 |
| transitionDelay | Set or return when the transition effect begins. | 3 |
| unicodeBidi | Set or return whether the text is rewritten to support multiple languages in the same document. | 2 |
| verticalAlign | Set or return the vertical alignment of content within the element. | 1 |
| visibility | Set or return whether the element should be visible. | 2 |
| whiteSpace | Set or return how tabs, line breaks, and spaces in text are handled. | 1 |
| width | Set or return the width of the element. | 1 |
| wordBreak | Set or return the line breaking rules for non-CJK languages. | 3 |
| wordSpacing | Set or return the space between words in text. | 1 |
| wordWrap | Allow long words or URL addresses to wrap to the next line. | 3 |
| widows | Set or return the minimum number of visible lines an element must have at the top of a page. | 2 |
| zIndex | Set or return the stacking order of positioned elements. | 2 |