Search within TutorialsPark

Javascript DOM: CSSStyleDeclaration Objects


Exercise complete control over CSS via DOM using CSSStyleDeclaration Object


Javascript DOM : Working with CSSStyleDeclaration Objects

While dealing with stylesheets or an element's style attribute, in order to exercise complete control over CSS via DOM , you need to use the CSSStyleDeclaration Object.

The members of the CSSStyleDeclaration Object are explained in detail below table.

Table : Members of CSSStyleDeclaration Object

Property Description Returns
cssText To get or set the text of the CSS style string
getPropertyCSSValue(<name>) To get the specified property CSSPrimitiveValue
getPropertyPriority(<name>) To get the priority of the specified property. string
getPropertyValue(<name>) To get the specified value as a string string
item(<pos>) To get the item at the specified position string
length To get the number of items number
parentRule To get the style rule if there exists one CSSStyleRule
removeProperty(<name>) To remove the specified property string
setProperty(<name> , <value>, <priority>) To set the value and priority for the specified property void
<style> To Convenience property to get or set the specified CSS property string

Javascript DOM : Working with Convenience Properties

The most simple way to work with a CSSStyleDeclaration object is via the convenience properties which correspond to inividual CSS properties

You can get the current value of a CSS property by reading the corresponding object property, and can even change the CSS value by assigning a new value to the object property.

The demo below displays the values of four CSSStyleDeclaration convenience properties, these properties are read from a stylesheet and an element's style attribute.

Example: Javascript DOM : Basic information about Stylesheet.

Give it a TRY! » Note: The border , color and padding convenience properties correspond to the CSS properties with the same name.


Javascript DOM : Working with Regular Properties

Its easy to use convenience properties when you know the names of the CSS properties you are supposed to work with, and there exists a convenience property for that.

But it you want to explore the CSS properties programmatically or access a CSS property with no corresponding convenience property then other members of the CSSStyleDeclaration object can prove to be useful.

The demo below explains the usage of some of these properties, it reads the style properties from one only source i.e the stylesheet.

Then it makes use of the getPropertyValue method to retrieve a value for a CSS property and setProperty method to define new values.

Example: Javascript DOM : Working with Regular Properties

Give it a TRY! » Note: The real CSS property names must be used with these methods and not the names of convenience properties.


Javascript DOM : Exploring Properties Programmatically

All throughout we named the CSS properties explicitly we needed, but to obtain information about which property has been applied without prior knowledge, you must explore it via the CSSStyleDeclaration members.

The Demo below explains such applications in a fair detail.

Example: Javascript DOM : Explore CSS Properties Programmatically

Give it a TRY! » Note: The property in the first stylesheets is displayed in the results.


Javascript DOM : Obtaining Style Property Importance(i.e priority)

An !important can be applied to a property declaration to assign a priority to the CSS rule while the browser applies them to the HTML elements.

The method getPropertyPriority available within the CSSStyleDeclaration object is used to check if the !important has been applied to a property declaration.

Example: Javascript DOM : Getting the priority of a property.

Give it a TRY! » Note: If no importance is specified for any declaration then an empty string is returned.