YouTip

---

Style Object

The Style object represents an individual style declaration.

Accessing the Style Object

The Style object can be accessed either from the head section of the document or from a specified HTML element.

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

var x = document.getElementsByTagName("STYLE"); Try it yourself

Access the style object of a specific element:

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

Creating 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 (CSS1, CSS2, or CSS3) the property is defined.

Property	Description	CSS
alignContent	Sets or returns the alignment between items when they do not use all available space horizontally in a flexible container.	3
alignItems	Sets or returns the alignment of items inside a flexible container.	3
alignSelf	Sets or returns the alignment for the selected item inside a flexible container.	3
animation	A shorthand property for all 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 the style applied to the element when the animation is not playing (e.g., before it starts, after it ends, or during delays).	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 background properties in one declaration.	1
backgroundAttachment	Sets or returns whether a background image scrolls with the page or is fixed.	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 a background image.	1
backgroundRepeat	Sets or returns how a background image is 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 facing away from the screen.	3
border	Sets or returns the 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 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 table borders should be collapsed into a single border.	2
borderColor	Sets or returns the color of an element's border (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 border image tiles should be repeated or stretched.	3
borderImageSlice	Sets or returns the inward offsets of the border image.	3
borderImageSource	Sets or returns the image to be used as a border.	3
borderImageWidth	Sets or returns the width of the border image.	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