DOM level 2 has introduced methods which deals with overlap of cascaded styles from style sheets that affect the style functionality of an element.

getComputedStyle()

The getComputedStyle () DOM Level 2 method provides access to the final computed style of any element within a document. This method is helpful because frequently styles may apply to an element from multiple sources and this method helps in finding the final styles and final absolute values in style which are applied to the element. This method returns a CSSStyleDeclaration object that represents the computed style of current element.

Syntax for getComputedStyle() method

getComputedStyle(element, pseudoElementName);

The element is the reference to the element whose style declaration is being fetched while pseudoElementName is the name of the pseudo; use empty string if no pseudo is needed.

Example of getComputedStyle() method

In the example above, the button had only font size set in the style attribute. But a cascaded style for the background colour of the button was also present in the document. Hence when ‘cssText’ of the button was checked, only the font-size was displayed, but when computed style was checked, background-color was also found.

In internet explorer, every element which has a style property also has a “currentStyle” property, which will give a final computed style of the element.

CSS Style Sheets Interface

DOM Level 2 supports CSSStyleSheet Interface to represent CSS Style Sheet as included using a <link> element [HTMLLinkElement] or defined in the <style> element [HTMLStyleElement]. With the exception of ‘disabled’ property, CSSStyleSheet object is completely read-only.

CSSStyleSheet

The CSSStyleSheet object inherits from StyleSheet. Following are the properties inherited from StyleSheet:

  • disabled: This property indicates if the style sheet is disabled.
  • href: URL of the style sheet if style sheets are referenced using <link> element.
  • media: List of media types supported by this stylesheet.
  • ownerNode<link> or a <style> element in HTML which owns the style sheet.
  • parentStyleSheet: Pointer to style sheet included via @import statement.
  • title: Title attribute of the ownerNode.
  • type: Type of style sheets, text/css for CSS style sheets

Properties and methods added by CSSStyleSheet

  • cssRules: Collection of rules contained in the style sheet retuned as CSSRuleList.
  • ownerRule: If style sheet is imported through @import statement, the ownerRule property will return that CSSImportRule, otherwise it returns null.
  • deleteRule(index): Deletes a rule from the style sheet.
  • insertRule(rule, index): Inserts the given style rule into the current style sheet as the position specified in the cssRules collection.

Some other common CSSStyleSheet properties and methods:

  • document.styleSheets: List of all stylesheets available in the document.
  • Element.sheet/Element.styleSheet: Style sheet object can be fetched directly from <link> or <style> element referencing a stylesheet using sheet() method.

CSS Rules

A CSS rule set consists of a selector and a declaration block. The selector points to the HTML element and the declaration block has one or more declarations separated by semicolons. Each declaration includes a property name and value, and is separated by a colon.

Syntax for CSS Rules

h1 {font-size:20px; test-align:center}

DOM Level 2 object CSSRule represents each rule in a style sheet. CSSStyleRule object inherits from CSSRule, this object represents styling information.

CSSStyleRule properties

  • cssText: This property returns the CSS rule as a text.
  • parentRule: Returns containing rule if present, else null is returned.
  • type: One of the Type constants indicating the type of CSS rule. For style rules, this is always 1.
  • selectorText: Returns the selector text for the rule.
  • style: Returns CSSStyleDeclaration object that allows the setting and getting of specific style values for the rule.
  • insertRule(rule, index): This method inserts a new style rule into current style sheet at the given index position.
  • deleteRule(index): This method deletes rule from the current stylesheet present at the given index. 

Syntax for insertRule() and deleteRule()

sheet.insertRule("h1 { color: red }", 0);

sheet.deleteRule(1);

 

›› go to examples ››