HTML DOM Style Object

Style Object

The Style object represents a single style declaration.

Style Object Property

Property Description
alignContent Set or return the alignment method between rows within the flexible container when items do not use all available space.
alignItems Set or return the alignment method of items within the flexible container.
alignSelf Set or return the alignment method of the selected items within the flexible container.
animation A shorthand property for all animation properties, except for animationPlayState.
animationDelay Set or return when the animation should start.
animationDirection Set or return whether the animation should play in reverse in an alternating loop.
animationDuration Set or return the number of seconds or milliseconds required for the animation to complete one cycle.
animationFillMode Set or return the value applied outside the execution time of the animation.
animationIterationCount Set or return the number of times the animation should play.
animationName Set or return the name of the @keyframes animation.
animationPlayState Set or return whether the animation is running or paused.
animationTimingFunction Set or return the speed curve of the animation.
background Set or return all background properties in a single declaration.
backgroundAttachment Set or return whether the background image is fixed or scrolls with the page.
backgroundClip Set or return the drawing area of the background.
backgroundColor Set or return the background color of the element.
backgroundImage Set or return the background image of the element.
backgroundOrigin 设置或返回背景图像的定位区域。
backgroundPosition Set or return the positioning area of the background image.
backgroundPosition Set or return the starting position of the background image.
backgroundRepeat Set or return how the background image is repeated (tiled).
backgroundSize Set or return the size of the background image.
backfaceVisibility Set or return whether the element is visible when not facing the screen.
borderBottom Set or return all borderBottom properties in a single declaration.
borderBottomColor Set or return the color of the bottom border.
borderBottomLeftRadius Set or return the shape of the bottom left border.
borderBottomRightRadius Set or return the shape of the bottom right border.
borderBottomStyle Set or return the style of the bottom border.
borderBottomWidth Set or return the width of the bottom border.
borderCollapse Set or return whether the table border should be collapsed into a single border.
borderColor Set or return the color of the element's border (up to four values can be set).
borderImage A shorthand property for setting or returning all borderImage properties.
borderImageOutset Set or return the amount that the border image area extends beyond the border box.
borderImageRepeat Set or return whether the image border should be repeated, wrapped, or stretched.
borderImageSlice Set or return the inward offset of the image border.
borderImageSource Set or return the image used as the border.
borderImageWidth Set or return the width of the image border.
borderLeft Set or return all borderLeft properties in a single declaration.
borderLeftColor Set or return the color of the left border.
borderLeftStyle Set or return the style of the left border.
borderLeftWidth Set or return the width of the left border.
borderRadius A shorthand property for setting or returning all four borderRadius properties.
borderRight Set or return all borderRight properties in a single declaration.
borderRightColor Set or return the color of the right border.
borderRightStyle Set or return the style of the right border.
borderRightWidth Set or return the width of the right border.
borderSpacing Set or return the space between cells in the table.
borderStyle Set or return the style of the element border (up to four values can be set).
borderTop Set or return all borderTop properties in one declaration.
borderTopColor Set or return the color of the top border.
borderTopLeftRadius Set or return the shape of the top left border.
borderTopRightRadius Set or return the shape of the top right border.
borderTopStyle Set or return the style of the top border.
borderTopWidth Set or return the width of the top border.
borderWidth Set or return the width of the element border (up to four values can be set).
bottom Set or return the bottom position of the positioned element.
boxDecorationBreak Set or return the behavior of the background and border of the element during pagination, or for inline elements, the behavior during line breaks.
boxShadow Attach one or more shadows to the box (box).
boxSizing Allows you to define certain elements to fit a certain area in a certain way.
captionSide Set or return the position of the table caption.
caretColor Set or return the color of the insertion symbol/cursor of the element.
clear Set or return the position of the element relative to the floating object.
clip Set or return which part of the positioned element is visible.
color Set or return the color of the text.
columnCount Set or return the number of columns the element should be divided into.
columnFill Set or return how the columns should be filled.
columnGap Set or return the gap between columns.
columnRule A shorthand attribute for setting or returning all columnRule properties.
columnRuleColor Set or return the color of the rule between columns.
columnRuleStyle Set or return the style of the rule between columns.
columnRuleWidth Set or return the width of the rule between columns.
columns A shorthand attribute for setting or returning the columnWidth and columnCount.
columnSpan Set or return how many columns the element should span.
columnWidth Set or return the width of the column.
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 type of cursor displayed when the mouse pointer is over the element.
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 break lines.
cssFloat Set or return the horizontal alignment 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 weight of the font.
fontSizeAdjust Maintain the readability of text when font fallback occurs.
fontStretch Choose the stretching deformation method from the font family.
hangingPunctuation Specify whether punctuation marks can be placed outside the line box.
height Set or return the height of the element.
hyphens Set how words are split to improve the layout of the paragraph.
icon Allow the author to use iconic equivalents to set the style of an element.
imageOrientation Specify the right or clockwise rotation applied to an image by the user agent.
isolation Define whether an element must create new stacking content.
justifyContent Set or return the alignment of items within an elastic container when not all available space is used.
left Set or return the left position of the located element.
letterSpacing Set or return the space between characters in the text.
lineHeight Set or return the distance between lines in the text.
listStyle Set or return the list style in one declaration.
listStyleImage Set or return the image as the list item marker.
listStylePosition Set or return the position of the list item marker.
listStyleType Set or return the type of the list item marker.
margin Set or return the margin of the element (up to four values can be set).
marginBottom Set or return the bottom outer margin of the element.
marginLeft Set or return the left outer margin of the element.
marginRight Set or return the right outer margin of the element.
marginTop Set or return the top outer margin of the element.
maxHeight Set or return the maximum height of the element.
maxWidth Set or return the maximum width of the element.
minHeight Set or return the minimum height of the element.
minWidth Set or return the minimum width of the element.
navDown Set or return the navigation position when using the down arrow navigation key.
navIndex Set or return the jump order of the element.
navLeft Set or return the navigation position when using the left arrow navigation key.
navRight Set or return the navigation position when using the right arrow navigation key.
navUp Set or return the navigation position when using the up arrow navigation key.
objectFit Specify how the content of the replaced element should fit into the box established by its used height and width.
objectPosition Specify the alignment of the replaced element within its box.
opacity Set or return the opacity level of the element.
order Set or return the order of the flexible item relative to the other items.
orphans Set or return the minimum number of lines that must stay at the bottom of the page when pagination occurs within the element.
outline Set or return all outline properties in one declaration.
outlineColor Set or return the color of the element's outline.
outlineOffset Offset the outline and draw it outside the border edge.
outlineStyle Set or return the style of the element's outline.
outlineWidth Set or return the width of the element's outline.
overflow Set or return how to handle the content that is presented outside the element's box.
overflowX Specify how to handle the left/right edge of the content if it overflows the element's content area.
overflowY Specifies how to handle the top/bottom edges of the content if it overflows the content area of the element.
padding Sets or returns the inner padding of the element (up to four values can be set).
paddingBottom Sets or returns the bottom inner padding of the element.
paddingLeft Sets or returns the left inner padding of the element.
paddingRight Sets or returns the right inner padding of the element.
paddingTop Sets or returns the top inner padding of the element.
pageBreakAfter Sets or returns the pagination behavior after the element.
pageBreakBefore Sets or returns the pagination behavior before the element.
pageBreakInside Sets or returns the pagination behavior within the element.
perspective Sets or returns the perspective of how to view the 3D element.
perspectiveOrigin Sets or returns the bottom position of the 3D element.
position Sets or returns the type of positioning method used for the element (static, relative, absolute, or fixed).
quotes Sets or returns the type of quotation marks for the embedded quotes.
resize Sets or returns whether the element can be resized by the user.
right Sets or returns the right position of the positioned element.
scrollBehavior Specifies whether there is a smooth scrolling animation effect when the user clicks on a link within a scrollable box, rather than jumping directly.
tableLayout Sets or returns the layout method of table cells, rows, and columns.
tabSize Sets or returns the length of the tab.
textAlign Sets or returns the horizontal alignment of the text.
textAlignLast When text-align is set to "justify", sets or returns how the last line of the block or the line before a forced line break is aligned.
textDecoration Sets or returns the text decoration.
textDecorationColor Sets or returns the color of the text decoration.
textDecorationLine Sets or returns the line type in the text decoration.
textDecorationStyle Sets or returns the style of the line in the text decoration.
textIndent Sets or returns the indentation of the first line of text.
textJustify Sets or returns the alignment method used when text-align is set to "justify".
textOverflow Sets or returns what should happen when the text overflows the containing element.
textShadow Sets or returns the shadow effect of the text.
textTransform Set or return the case of the text.
top Set or return the top position of the positioned element.
transform Apply 2D or 3D transformations to the element.
transformOrigin Set or return the position of the transformed element.
transformStyle Set or return how nested elements are rendered in 3D space.
transition A shorthand property used to set or return four transformation properties.
transitionProperty Set or return the CSS properties of the transition effect.
transitionDuration Set or return the number of seconds or milliseconds required for the transition effect to complete.
transitionTimingFunction Set or return the speed curve of the transition effect.
transitionDelay Set or return when the transition effect should start.
unicodeBidi Set or return whether text should be overlaid to support multiple languages in the same document.
userSelect Set or return whether the text of the element can be selected.
verticalAlign Set or return the vertical alignment of the content within the element.
visibility Set or return whether the element is visible.
whiteSpace Set or return how tab characters, line breaks, and spaces in the text are handled.
width Set or return the width of the element.
wordBreak Set or return the line-breaking rules for non-CJK scripts.
wordSpacing Set or return the spacing between words in the text.
wordWrap Allow long, unbreakable words to be broken and wrapped to the next line.
widows Set or return the minimum number of lines that must be visible at the top of the page for an element.
zIndex Set or return the stack order of the positioned element.

Access Style Object

The Style object can be accessed from the head part of the document or a specific HTML element.

Example 1

Access the style object from the head part of the document:

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

Try It Yourself

Example 2

Access the style object of a specified element:

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

Try It Yourself

Create Style Object

Example 1

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

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

Try It Yourself

Example 2

You can also set the style attributes of existing elements:

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

Try It Yourself

Related Pages

HTML Tutorial:HTML CSS

CSS Tutorial:CSS Tutorial

HTML Reference Manual:HTML <style> tag

CSS Reference Manual:CSS Properties