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

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

removeRule method (styleSheet)

Browser support:

Removes a rule from the current styleSheet object.

The rules collection represents the CSS rules excluding the at-rules, contained by a styleSheet object. The removeRule method removes the rule at the specified position from the rules collection.

In Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9, use the deleteRule method for similar functionality. It removes a CSSRule from the cssRules collection of a styleSheet object. The cssRules collection represents the CSS rules including the at-rules.

To remove at-rules in older Internet Explorer versions, use the removeImport method for @import at-rules or modify the value of the cssText property for the others.

Syntax:

object.removeRule ([positionIndex]);

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

Parameters:

positionIndex

Optional. Zero-based integer that specifies the position of the style rule to remove in the rules collection.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the deleteRule and removeRule methods:

<head>
    <style id="myStyle">
        body {
            background-color:#FF0000;
        }
    </style>
    <script type="text/javascript">
        function RemoveRule () {
            var styleTag = document.getElementById ("myStyle");

            var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;

            if (sheet.cssRules) { // all browsers, except IE before version 9
                if (sheet.cssRules.length > 0) {            
                    sheet.deleteRule (0);
                }
            }
            else {        // Internet Explorer before version 9
                if (sheet.removeRule) {
                    if (sheet.rules.length > 0) {            
                        sheet.removeRule (0);
                    }
                }
            }
        }
    </script>
</head>
<body>
    <button onclick="RemoveRule ();">Remove the body style rule!</button>
</body>