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

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

insertRule method (CSSMediaRule, styleSheet)

Browser support:

9

Inserts a new rule into the current style sheet.

Note: The insertRule method is supported in Internet Explorer from version 9.

The insertRule method creates a new CSSRule object and inserts it into the cssRules collection of the current styleSheet or CSSMediaRule object. Both at-rules and rules can be represented by CSSRule objects, so the insertRule method supports them, too.

In older Internet Explorer versions, use the addRule method to create a rule object and to insert it into the rules collection of a styleSheet object. The rule object cannot represent at-rules, so the addRule method cannot be used for at-rules. To add at-rules, use the addImport method for @import at-rules or modify the value of the cssText property for the others.

Syntax:

object.insertRule (styleRule, positionIndex);

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

Parameters:

styleRule

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

positionIndex

Required. Integer that specifies the position for the new CSSRule object in the cssRules collection.

Return value:

Integer that retrieves the position of the inserted CSSRule object in the cssRules collection of the current styleSheet object.

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>