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

You are here: Reference > JavaScript > client-side > style handling > methods > addRule (styleSheet)

addRule method (styleSheet)

Browser support:

Inserts a new rule into the current styleSheet object.

The addRule method creates a new rule object and inserts it into the rules collection of the current styleSheet object. Since the rules collection does not contain the at-rules, so the addRule method can only be used for style rules.

In Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9, use the insertRule method to create a CSSRule object and to insert it into the cssRules collection of a styleSheet object. Both at-rules and rules can be represented by CSSRule objects in those browsers, so the insertRule method supports them, too.
To add at-rules to a style sheet in older Internet Explorer versions, use the addImport method for @import at-rules or modify the value of the cssText property for the others.

Syntax:

object.addRule (selector, styleDef [, positionIndex]);

You can find the related objects in the Supported by objects section below.

Parameters:

selector

Required. String that specifies the selector for the new rule object.

styleDef

Required. String that specifies the style definitions for the new rule object.

positionIndex

Optional. Integer that specifies the position for the new rule in the rules collection.

Return value:

The returned value is always -1.

Example HTML code 1:

This example illustrates the use of the addRule and insertRule methods.

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

                // the empty style sheet
            var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
            
            if (sheet.insertRule) {   // all browsers, except IE before version 9
                sheet.insertRule ("button {color:red}", 0);
            }
            else {  // Internet Explorer before version 9
                if (sheet.addRule) {
                    sheet.addRule ("button", "color:red", 0);
                }
            }
        }
    </script>
</head>
<body>
    <button onclick="AddNewStyleRule ();">Click to modify my text color!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example creates a new style sheet and insert a new rule into it:

<head>
    <script type="text/javascript">
        function CreateStyleRule () {
                // create a new style sheet 
            var styleTag = document.createElement ("style");
            var head = document.getElementsByTagName ("head")[0];
            head.appendChild (styleTag);

            var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
            
                // add a new rule to the style sheet
            if (sheet.insertRule) {
                sheet.insertRule ("body {background:red;}", 0);
            } 
            else {
                sheet.addRule ("body", "background:red", 0);
            }
        }
    </script>
</head>
<body>
    <button onclick="CreateStyleRule ();">Create a new style rule!</button>
</body>