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

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

rules collection

Browser support:

Represents a collection of style rules in a styleSheet.

The rules in the collection are sorted in source code order. Each item in the rules collection is a rule object that represents a single style rule.

CSS rules can be accessed differently in different browsers:

The cssRules collection provides access to both style rules and at-rules in all modern browsers. Unfortunately, Internet Explorer only supports the cssRules collection from version 9.
In Internet Explorer before version 9 (and in newer ones as well), the rules collection provides similar functionality to the cssRules collection. The rules collection does not contain the at-rules only style rules. The only way to access to an at-rule is to use the pages collection. It represents a collection of @page at-rules in a styleSheet. The other at-rules cannot be accessed in Internet Explorer before version 9.
Note: the imports collection provides access to the imported stylesheets in Internet Explorer. It represents a collection of stylesheets, not @import at-rules.

Note: In Google Chrome and Safari, the rules property of the styleSheet object is supported, but it refers to the cssRules, not the rules collection. If you need to use both cssRules and rules collections in your code (if you need implement different solution in Internet Explorer before version 9 than in other browsers), then always try to use the cssRules collection first and if it is not supported, then use the rules collection.

Syntax:

Properties that reference the object:

•	styleSheet.rules

Possible members:

Properties:

length

Returns an integer that specifies the number of objects in the current collection.

This property is read-only.

Methods:

[index]

Returns an object from the current collection by index.

Parameters:

index

Required. Zero-based integer that specifies the position of the object to retrieve.

Return value:

Returns the rule object at the specified position.

item (index)

Returns an object from the current collection by index.

Parameters:

index

Required. Zero-based integer that specifies the position of the object to retrieve.

Return value:

Returns the rule object at the specified position.

Example HTML code 1:

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 HTML code 2:

This example shows how to change a style rule 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>