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

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

rule object

Browser support:

Represents a style rule in JavaScript.

The rules collection does not contain the at-rules only style rules, while the cssRules collection contains both style rules and at-rules. The cssRules collection is supported in all browsers except in Internet Explorer before version 9. For further details, please see the page for the rules and cssRules collections.

Syntax:

Methods that return the object:

•	rules.item (index)

Possible members:

Properties:

cssText

9

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

parentRule

9

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

parentStyleSheet

9

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

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.

type

9

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

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>