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

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

deleteRule method (CSSMediaRule, styleSheet)

Browser support:

9

Removes a rule from the current style sheet.

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

The cssRules collection represents both style rules and at-rules in a style sheet. The deleteRule method removes the CSSRule object at the specified position from the cssRules collection.

In older Internet Explorer versions, use the removeRule method for similar functionality. It removes a rule from the rules collection of a style sheet. The rules collection does not contains the at-rules. To remove at-rules, use the removeImport method for @import at-rules or modify the value of the cssText property for the others.

Syntax:

object.deleteRule (positionIndex);

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

Parameters:

positionIndex

Required. Zero-based integer that specifies the position of the style rule to remove in the cssRules 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>