Search within TutorialsPark

Javascript DOM: Stylesheets


Use Javascript DOM to work with CSS style in the document


Javascript DOM : Working with CSS Stylesheets

A Documents CSS stylesheet can be accessed using the property document.styleSheets.

It returns a collection of objects representing the stylesheets related to the document.

Table : Accessing Stylesheets

Property Description Returns
document.stylesheets To return the collection of stylesheets CSSStyleSheet[]

Each of the stylesheet is represented by a CSSStyleSheet object.

This object provides a set of properties and methods for manipulating the CSS styles in the document.

The table below explains in detail the CSSStyleSheet members.

Table : Members of the CSSStyleSheet Object

Member Description Returns
cssRules To append the specified element as a child of the current element void
deleteRule(<pos>) To remove a rule from the stylesheet void
disabled To get or set the disabled state of stylesheet boolean
href To return the href for linked stylesheet string
insertRule(<rule>, <pos>) To insert a new rule into the stylesheet number
media To return the set of media constraints applied to the stylesheet. MediaList
ownerNode To return the element in which the style is defined HTMLElement
title To return the value of the title attribute string
type To return the value of the type attribute string

Javascript DOM : Get Basic Information about the Stylesheets

Javascript DOM properties and Methods can be used to get basic information about the stylesheets.

The script below does an analysis of the stylesheet defines in the document and then creates a table specifying the basic information available for each property.

The example below has three stylesheets, two internal styles using the <style> element and one external file named as mystyle.css imported into the document using the element <link>

Example: Javascript DOM : Basic information about Stylesheet.

Give it a TRY! » Note: The returns value is a booleantrue or false


Javascript DOM : Working with Media Constraints

The new CSS3 specifications allows you to use the attribute media while writing style rules to specify conditions under which the CSS styles are to be applied only.

These media Constraints can be accessed using the property CSSStyleSheet.media.property , it returns a MediaList object which has some associated properties and methods

Table : Members of the CSSStyleSheet Object

Member Description Returns
appendMedium(<medium>) To add a new medium to the list void
deleteMedium(<medium>) To remove a medium from the list void
item(<pos>) To return the media at the specified index string
length To return the number of media string
mediaText To return the text value of the media attribute string

The demo below creates a table for stylesheets that has a media attribute.

Example: Javascript DOM : CSS information using MediaList Object

Give it a TRY! » Note: Try using other members of the MediaList Objects.


Javascript DOM : Disabling Stylesheets

Complete stylesheet can be disabled in a single step using the property CSSStyleSheet.disabled.

The Demo below uses a toggle button to switch a stylesheet on and off.

Example: Javascript DOM : Disable Stylesheet

Give it a TRY! » Note: Try using other members of the MediaList Objects.


Javascript DOM : Working with Individual Properties

The property CSSStyleSheet.cssRules returns a CSSRuleList object which enables access to individual styles within the stylesheets.

Table : Members of the CSSStyleSheet Object

Member Description Returns
item(<pos>) To return the CSS style at the specified index CSSStyleRule
length To return the number of styles in the stylesheet number
cssText To get or set the text(including the selector) for the style string
parentStyleSheet To get the stylesheet to which this style belongs CSSStylesheet
selectorText To get ot set the selector text for the style. string
style To get an object representing the styles CSSStyleDeclaration

Example: Javascript DOM : Working with CSSRuleList and CSSStyleRule Object

Give it a TRY! » Note: Try using other members of the MediaList Objects.


Javascript DOM : Working with Element Styles

In order to get style properties defined using an element's style attribute, you need to read the value of the style property defined using HTMLElement objects .

The style property returns a CSSStyleDeclaration object which is similar to the objects obtained through stylesheets.

In the below demo, the script shows the values of the style attribute for an element, when the button is clicked it changes the value to apply the specified styles.

Example: Javascript DOM : Getting a CSSStyleDeclaration object using an HTMLElement

Give it a TRY! » Note: The CSSStyleDeclaration.cssText property is used to show and modify the style properties .