In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > objects > CSSRule

CSSRule object

Browser support:

9

Represents a style rule or at-rule in JavaScript.

Note: The CSSRule object and its descendant objects are supported in Internet Explorer from version 9.

There are different kinds of rules in CSS. Different rule types are represented by different rule objects.
These rule objects are: CSSCharsetRule, CSSFontFaceRule, CSSImportRule, CSSMediaRule, CSSPageRule and CSSStyleRule.

The base object for all rule objects is the CSSRule object. The CSSRule object does not represent any CSS rule, it contains common properties that are supported by all rule objects.

You can get an instance of a rule object through the cssRules collection. The cssRules collection is supported in Internet Explorer from version 9. In older Internet Explorer versions, use the rules collection and the rule object for similar functionality.

Syntax:

Methods that return a rule object:

•	cssRules[index]
•	cssRules.item (index)

CSSRule object:

Browser support:

9

This is the base object for all CSS rule objects. This contains common properties that are supported by all rule objects.

Constants:

The following constants are available in the scope of the CSSRule object.

You can use them directly through the CSSRule object (CSSRule.UNKNOWN_RULE) or through an instance of any CSS rule object. The constants represent rule types (see the type property).

UNKNOWN_RULE

The type of the rule is unknown.

STYLE_RULE

The rule is a style rule.

CHARSET_RULE

The rule is a @charset rule.

IMPORT_RULE

The rule is an @import rule.

MEDIA_RULE

The rule is a @media rule.

FONT_FACE_RULE

The rule is a @font-face rule.

PAGE_RULE

The rule is a @page rule.

Properties:

cssText

Sets or retrieves the contents of a style declaration as a string.

parentRule

Returns a reference to the CSSRule object that contains the current CSSRule object.

parentStyleSheet

Returns the styleSheet object that contains the current CSSRule object or imports the current styleSheet object.

type

Retrieves an integer value that identifies the type of the CSS rule represented by the current CSSRule object.

CSSCharsetRule object:

Browser support:

Represents a @charset rule in JavaScript.

Additional members:

CSSFontFaceRule object:

Browser support:

9

Represents a @font-face rule in JavaScript.

Additional members:

Properties:

style

Represents the inline style settings for an element or a CSS rule.

CSSImportRule object:

Browser support:

9

Represents a @import rule in JavaScript.

Additional members:

Properties:

href

Sets or returns the URL of a linked style sheet.

media

Returns the list of media types defined for a specific style rule or a styleSheet object.

styleSheet

Returns the styleSheet object that is associated with the style file included by an @import at-rule.

CSSMediaRule object:

Browser support:

9

Represents a @media rule in JavaScript.

Additional members:

Properties:

cssRules

Represents a collection of CSS rules in a styleSheet or media rule.

media

Returns the list of media types defined for a specific style rule or a styleSheet object.

Methods:

deleteRule

Removes a rule from the current style sheet.

insertRule

Inserts a new rule into the current style sheet.

CSSPageRule object:

Browser support:

9

Represents a @page rule in JavaScript.

Additional members:

Properties:

pseudoClass

Returns the name of the pseudo class associated with the @page at-rule.

selector

Returns the selector component of a @page rule as a string.

selectorText

Sets or retrieves a string that identifies the selector part of the current rule.

style

Represents the inline style settings for an element or a CSS rule.

CSSStyleRule object:

Browser support:

9

Represents a style rule in JavaScript.

Additional members:

Properties:

readOnly

Returns a Boolean value that indicates whether the current style sheet or rule is imported or not.

selectorText

Sets or retrieves a string that identifies the selector part of the current rule.

style

Represents the inline style settings for an element or a CSS rule.

Example 1:

This example shows how to get the selector part of a style rule:

<head>
    <style id="myStyle">
        .red {
            color: red;
        }
    </style> 

    <script type="text/javascript">
        function GetSelector () {
            var styleTag = document.getElementById ("myStyle");

                // the style sheet in the style tag
            var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;

                // the first rule in the style sheet
            var rules = sheet.cssRules ? sheet.cssRules : sheet.rules;
            var firstRule = rules[0];

            alert (firstRule.selectorText);
        }
    </script> 
</head>
<body>
    <button onclick="GetSelector ()">Get the selector component!</button>
    <br /><br />
    <div class="red">red division</div>
    <div>non-red division</div>
    <span class="red">red span</span>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example 2:

This example shows how to change a style rule in an embedded style sheet:

<head>
    <style id="myStyle">
        .red {
            color: red;
        }
    </style> 
    <script type="text/javascript">
        function ChangeRedColor () {
            var styleTag = document.getElementById ("myStyle");

                // the style sheet in the style tag
            var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
            
                // the first rule in the style sheet
            var rules = sheet.cssRules ? sheet.cssRules : sheet.rules;
            var firstRule = rules[0];

                // change the color
            firstRule.style.color = "#00ff00";
        }
    </script> 
</head>
<body>
    <button onclick="ChangeRedColor ()">Change the color of the '.red' style rule!</button>
    <br /><br />
    <div class="red">red division</div>
    <div>non-red division</div>
    <span class="red">red span</span>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example 3:

This example shows how to change a style rule when it is placed in an external style sheet:

Code

red.css

<head>
    <link id="myLink" rel="stylesheet" type="text/css" href="red.css" />
    <script type="text/javascript">
        function ChangeRedColor () {
            var linkTag = document.getElementById ("myLink");

                // the imported style sheet
            var importedSheet = linkTag.sheet ? linkTag.sheet : linkTag.styleSheet;
    
                // the first rule in the style sheet
            var rules = importedSheet.cssRules ? importedSheet.cssRules : importedSheet.rules;
            var firstRule = rules[0];

                // change the color
            firstRule.style.color = "#00ff00";
        }
    </script> 
</head>
<body>
    <button onclick="ChangeRedColor ()">Change the color of the '.red' style rule!</button>
    <br /><br />
    <div class="red">red division</div>
    <div>non-red division</div>
    <span class="red">red span</span>
</body>


.red {
    color: red;
}

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

External links:

CSSRule (MSDN)
CSSRule (Mozilla Developer Center)

Digg Del.icio.us Reddit Facebook Twitter Diigo

User Contributed Comments

CSSRule object

Syntax:

CSSRule object:

Constants:

Properties:

CSSCharsetRule object:

Additional members:

CSSFontFaceRule object:

Additional members:

Properties:

CSSImportRule object:

Additional members:

Properties:

CSSMediaRule object:

Additional members:

Properties:

Methods:

CSSPageRule object:

Additional members:

Properties:

CSSStyleRule object:

Additional members:

Properties:

Example 1:

Example 2:

Example 3:

External links:

Post Content