The Style object represents an individual style statement.
The following code shows how to get style object from the head section of the document.
<!DOCTYPE html>
<html>
<head>
<style>
body {<!--from w w w .j a va2 s. com-->
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementsByTagName("STYLE")[0];
document.getElementById("demo").innerHTML = x.innerHTML;
}
</script>
</body>
</html>
The code above is rendered as follows:
CSSStyleDeclaration object provides
the complete control of CSS via the DOM.
The Members of the CSSStyleDeclaration Object
| Member | Description | Returns |
|---|---|---|
| cssText | Gets or sets the text of the style. | string |
| getPropertyCSSValue(name) | Gets the specified property. | CSSPrimitiveValue |
| getPropertyPriority(name) | Gets the priority of the specified property. | string |
| getPropertyValue(name) | Gets the specified value as a string. | string |
| item(pos) | Gets the item at the specified position. | string |
| length | Gets the number of items. | number |
| parentRule | Gets the style rule if there is one. | CSSStyleRule |
| removeProperty(name) | Removes the specified property. | string |
| setProperty(name, value, priority) | Sets the value and priority for the specified property. | void |
| style | Convenience property to get or set the specified CSS property. | string |
The following code shows how to get a specified element's style object.
<!DOCTYPE html>
<html>
<body>
<h1 id="myH1" style="color:red">My Header</h1>
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {<!--from w ww.java2 s . c o m-->
var x = document.getElementById("myH1").style.color;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
The code above is rendered as follows:
We can create a <style> element by using the document.createElement() method.
<!DOCTYPE html>
<html>
<head>
</head><!-- w ww . j av a2 s. c o m-->
<body>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
var x = document.createElement("STYLE");
var t = document.createTextNode("body {font: 20px verdana;}");
x.appendChild(t);
document.head.appendChild(x);
}
</script>
</body>
</html>
The code above is rendered as follows:
We can set the style properties of an existing element.
<!DOCTYPE html>
<html>
<body>
<!-- w w w . ja v a 2s.co m-->
<h1 id="myH1">How to change the style of a header</h1>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
document.getElementById("myH1").style.color = "red";
}
</script>
</body>
</html>
The code above is rendered as follows:
| Property | Description | CSS Version |
|---|---|---|
| alignContent | Sets or gets the alignment between the lines inside a flexible container | 3 |
| alignItems | Sets or gets the alignment for items inside a flexible container. | 3 |
| alignSelf | Sets or gets the alignment for selected items inside a flexible container. | 3 |
| animation | A shorthand property for all the animation properties | 3 |
| animationDelay | Sets or gets when the animation will start | 3 |
| animationDirection | Sets or gets whether the animation should play in reverse on alternate cycles | 3 |
| animationDuration | Sets or gets how many seconds or milliseconds an animation takes to complete one cycle | 3 |
| animationFillMode | Sets or gets what values are applied outside the time the animation is executing | 3 |
| animationIterationCount | Sets or gets the number of times an animation should be played | 3 |
| animationName | Sets or gets a name for the @keyframes animation | 3 |
| animationTimingFunction | Sets or gets the speed curve of the animation | 3 |
| animationPlayState | Sets or gets whether the animation is running or paused | 3 |
| background | Sets or gets all the background properties in one declaration | 1 |
| backgroundAttachment | Sets or gets whether a background-image is fixed or scrolls with the page | 1 |
| backgroundColor | Sets or gets the background-color of an element | 1 |
| backgroundImage | Sets or gets the background-image for an element | 1 |
| backgroundPosition | Sets or gets the starting position of a background-image | 1 |
| backgroundRepeat | Sets or gets how to repeat (tile) a background-image | 1 |
| backgroundClip | Sets or gets the painting area of the background | 3 |
| backgroundOrigin | Sets or gets the positioning area of the background images | 3 |
| backgroundSize | Sets or gets the size of the background image | 3 |
| backfaceVisibility | Sets or gets whether or not an element should be visible when not facing the screen | 3 |
| border | Sets or gets borderWidth, borderStyle, and borderColor in one declaration | 1 |
| borderBottom | Sets or gets all the border bottom properties in one declaration | 1 |
| borderBottomColor | Sets or gets the color of the bottom border | 1 |
| borderBottomLeftRadius | Sets or gets the shape of the border of the bottom-left corner | 3 |
| borderBottomRightRadius | Sets or gets the shape of the border of the bottom-right corner | 3 |
| borderBottomStyle | Sets or gets the style of the bottom border | 1 |
| borderBottomWidth | Sets or gets the width of the bottom border | 1 |
| borderCollapse | Sets or gets whether the table border should be collapsed into a single border, or not | 2 |
| borderColor | Sets or gets the color of an element's border | 1 |
| borderImage | A shorthand property for setting or returning all the border image properties | 3 |
| borderImageOutset | Sets or gets the distance the border image area extends beyond the border box | 3 |
| borderImageRepeat | Sets or gets whether the image-border should be repeated, rounded or stretched | 3 |
| borderImageSlice | Sets or gets the inward offsets of the image-border | 3 |
| borderImageSource | Sets or gets the image URL for a border | 3 |
| borderImageWidth | Sets or gets the widths of the image-border | 3 |
| borderLeft | Sets or gets all the border left * properties in one declaration | 1 |
| borderLeftColor | Sets or gets the color of the left border | 1 |
| borderLeftStyle | Sets or gets the style of the left border | 1 |
| borderLeftWidth | Sets or gets the width of the left border | 1 |
| borderRadius | A shorthand property for setting or returning all the four border radius properties | 3 |
| borderRight | Sets or gets all the border right properties in one declaration | 1 |
| borderRightColor | Sets or gets the color of the right border | 1 |
| borderRightStyle | Sets or gets the style of the right border | 1 |
| borderRightWidth | Sets or gets the width of the right border | 1 |
| borderSpacing | Sets or gets the space between cells in a table | 2 |
| borderStyle | Sets or gets the style of an element's border | 1 |
| borderTop | Sets or gets all the border top properties in one declaration | 1 |
| borderTopColor | Sets or gets the color of the top border | 1 |
| borderTopLeftRadius | Sets or gets the radius of the border of the top-left corner | 3 |
| borderTopRightRadius | Sets or gets the radius of the border of the top-right corner | 3 |
| borderTopStyle | Sets or gets the style of the top border | 1 |
| borderTopWidth | Sets or gets the width of the top border | 1 |
| borderWidth | Sets or gets the width of an element's border | 1 |
| bottom | Sets or gets the bottom position of a positioned element | 2 |
| boxShadow | Attaches one or more drop-shadows to the box | 3 |
| boxSizing | Fefine certain elements to fit an area in a certain way | 3 |
| captionSide | Sets or gets the position of the table caption | 2 |
| clear | Clear left or right relative to floating objects | 1 |
| clip | Sets or gets which part of a positioned element is visible | 2 |
| color | Sets or gets the color of the text | 1 |
| columnCount | Sets or gets the number of columns an element should be divided into | 3 |
| columnFill | Sets or gets how to fill columns | 3 |
| columnGap | Sets or gets the gap between the columns | 3 |
| columnRule | A shorthand property for setting or returning all the column rule properties | 3 |
| columnRuleColor | Sets or gets the color of the rule between columns | 3 |
| columnRuleStyle | Sets or gets the style of the rule between columns | 3 |
| columnRuleWidth | Sets or gets the width of the rule between columns | 3 |
| columns | A shorthand property for setting or returning columnWidth and columnCount | 3 |
| columnSpan | Sets or gets how many columns an element should span across | 3 |
| columnWidth | Sets or gets 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 gets the type of cursor for the mouse pointer | 2 |
| direction | Sets or gets the text direction | 2 |
| display | Sets or gets an element's display type | 1 |
| emptyCells | Sets or gets whether to show the border and background of empty cells | 2 |
| flex | A shorthand for the flexGrow, flexShrink, and the flexBasis properties. | 3 |
| flexBasis | Sets or gets the initial length of a flexible item | 3 |
| flexDirection | Sets or gets the direction of the flexible items | 3 |
| flexFlow | A shorthand property for the flexDirection and the flexWrap properties | 3 |
| flexGrow | Sets or gets how much the item will grow relative to the rest | 3 |
| flexShrink | Sets or gets how the item will shrink relative to the rest | 3 |
| flexWrap | Sets or gets whether the flexible items should wrap or not | 3 |
| cssFloat | Sets or gets the horizontal alignment of an element | 1 |
| font | Shorthand property for fontStyle, fontVariant, fontWeight, fontSize, lineHeight, and fontFamily | 1 |
| fontFamily | Sets or gets the font family for text | 1 |
| fontSize | Sets or gets the font size of the text | 1 |
| fontStyle | Sets or gets whether the style of the font is normal, italic or oblique | 1 |
| fontVariant | Sets or gets whether the font should be displayed in small capital letters | 1 |
| fontWeight | Sets or gets the boldness of the font | 1 |
| fontSizeAdjust | Preserves the readability of text when font fallback occurs | 3 |
| fontStretch | Selects a normal, condensed, or expanded face from a font family | 3 |
| hangingPunctuation | Specifies whether a punctuation character may be placed outside the line box | 3 |
| height | Sets or gets the height of an element | 1 |
| imageOrientation | Specifies a rotation in the right or clockwise direction that a user agent applies to an image | 3 |
| justifyContent | Sets or gets the alignment between the items inside a flexible container. | 3 |
| left | Sets or gets the left position of a positioned element | 2 |
| letterSpacing | Sets or gets the space between characters in a text | 1 |
| lineHeight | Sets or gets the distance between lines in a text | 1 |
| listStyle | Sets or gets listStyleImage, listStylePosition, and listStyleType in one declaration | 1 |
| listStyleImage | Sets or gets an image as the list-item marker | 1 |
| listStylePosition | Sets or gets the position of the list-item marker | 1 |
| listStyleType | Sets or gets the list-item marker type | 1 |
| margin | Sets or gets the margins of an element | 1 |
| marginBottom | Sets or gets the bottom margin of an element | 1 |
| marginLeft | Sets or gets the left margin of an element | 1 |
| marginRight | Sets or gets the right margin of an element | 1 |
| marginTop | Sets or gets the top margin of an element | 1 |
| maxHeight | Sets or gets the maximum height of an element | 2 |
| maxWidth | Sets or gets the maximum width of an element | 2 |
| minHeight | Sets or gets the minimum height of an element | 2 |
| minWidth | Sets or gets the minimum width of an element | 2 |
| opacity | Sets or gets the opacity level for an element | 3 |
| order | Sets or gets the order of the flexible item, relative to the rest | 3 |
| orphans | Sets or gets the minimum number of lines for an element that must be left at the bottom of a page | 2 |
| outline | Sets or gets all the outline properties in one declaration | 2 |
| outlineColor | Sets or gets the color of the outline around a element | 2 |
| outlineOffset | Offsets an outline, and draws it beyond the border edge | 3 |
| outlineStyle | Sets or gets the style of the outline around an element | 2 |
| outlineWidth | Sets or gets the width of the outline around an element | 2 |
| overflow | Sets or gets what to do with content that renders outside the element box | 2 |
| overflowX | Specifies what to do with the overflows in X axis | 3 |
| overflowY | Specifies what to do with the overflows in Y axis | 3 |
| padding | Sets or gets the padding of an element | 1 |
| paddingBottom | Sets or gets the bottom padding of an element | 1 |
| paddingLeft | Sets or gets the left padding of an element | 1 |
| paddingRight | Sets or gets the right padding of an element | 1 |
| paddingTop | Sets or gets the top padding of an element | 1 |
| pageBreakAfter | Sets or gets the page-break behavior after an element | 2 |
| pageBreakBefore | Sets or gets the page-break behavior before an element | 2 |
| pageBreakInside | Sets or gets the page-break behavior inside an element | 2 |
| perspective | Sets or gets the perspective on how 3D elements are viewed | 3 |
| perspectiveOrigin | Sets or gets the bottom position of 3D elements | 3 |
| position | Sets or gets the type of positioning method used for an element (static, relative, absolute or fixed) | 2 |
| quotes | Sets or gets the type of quotation marks for embedded quotations | 2 |
| resize | Sets or gets whether an element is resizable by the user | 3 |
| right | Sets or gets the right position of a positioned element | 2 |
| tableLayout | Sets or gets how to layout table cells, rows, and columns | 2 |
| tabSize | Sets or gets the length of the tab-character | 3 |
| textAlign | Sets or gets the horizontal alignment of text | 1 |
| textAlignLast | Sets or gets how the last line of a block or a line right before a forced line break is aligned | 3 |
| textDecoration | Sets or gets the decoration of a text | 1 |
| textDecorationColor | Sets or gets the color of the text-decoration | 3 |
| textDecorationLine | Sets or gets the type of line in a text-decoration | 3 |
| textDecorationStyle | Sets or gets the style of the line in a text decoration | 3 |
| textIndent | Sets or gets the indentation of the first line of text | 1 |
| textJustify | Sets or gets the justification method used when text-align is 'justify' | 3 |
| textOverflow | Sets or gets what to do when text overflows the containing element | 3 |
| textShadow | Sets or gets the shadow effect of a text | 3 |
| textTransform | Sets or gets the capitalization of a text | 1 |
| top | Sets or gets the top position of a positioned element | 2 |
| transform | Applies a 2D or 3D transformation to an element | 3 |
| transformOrigin | Sets or gets the position of transformed elements | 3 |
| transformStyle | Sets or gets how elements are rendered in transform | 3 |
| transition | A shorthand property for setting or returning the four transition properties | 3 |
| transitionProperty | Sets or gets the CSS property that the transition effect is for | 3 |
| transitionDuration | Sets or gets how many seconds or milliseconds a transition effect takes to complete | 3 |
| transitionTimingFunction | Sets or gets the speed curve of the transition effect | 3 |
| transitionDelay | Sets or gets when the transition effect will start | 3 |
| unicodeBidi | Sets or gets whether the text should be overridden to support multiple languages | 2 |
| verticalAlign | Sets or gets the vertical alignment of the content in an element | 1 |
| visibility | Sets or gets whether an element should be visible | 2 |
| whiteSpace | Sets or gets how to handle tabs, line breaks and whitespace in a text | 1 |
| width | Sets or gets the width of an element | 1 |
| wordBreak | Sets or gets line breaking rules for non-CJK scripts | 3 |
| wordSpacing | Sets or gets the spacing between words in a text | 1 |
| wordWrap | Allows long, unbreakable words to be broken and wrap to the next line | 3 |
| widows | Sets or gets the minimum number of lines for an element that must be visible at the top of a page | 2 |
| zIndex | Sets or gets the stack order of a positioned element | 2 |