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