DHTML Methods

---

DOM Level 2 Specification.

Deletes an existing style rule in the style sheet.

styleSheet.removeRule [ iIndex ] 

iIndex

Optional. Integer specifying the index value of the rule that is to be deleted from the style sheet. If an index is not provided, the last rule in the rules collection will be removed.

No return value.

This method removes an existing style definition for the styleSheet object and adjusts the index of the rules collection accordingly.

The page is not automatically reflowed when the rule is removed. You will have to reflow the page to see the change. The objects affected can be reflowed using a number of methods. For example, the style change can be reflowed on only affected text by setting the text equal to itself as shown in the following example. Alternately, the entire page can be reloaded using the reload method. Table content is reflowed when refreshed using the refresh method.

This method is Microsoft's^® implementation of the generic deleteRule interface provided for in the DOM.

The following example deletes a rule from the rules collection and reflows the text according to the new rules.

<style>
   p { color:green }
</style>
...
<script language="JavaScript">
function removeTheRule ( ) {
   // style sheets and rules are zero-based collections;
   // therefore, the first item is 0 in the collection.
   var ns = document.styleSheets.length;
   var nr = document.styleSheets [ ns-1 ].rules.length;
   // make sure there is a rule to delete
   if ( 1 < nr ) {
      document.styleSheets [ ns-1 ] .removeRule ( 1 );
      // Force the page to render the change.
      theText.innerHTML=theText.innerHTML;
   }
}
</script>
...
<p id=msg>This text will have the new style applied to it.</p>
...
<button onclick="removeTheRule ( )">Remove the new rule.</button>

styleSheet

addRule, rules, styleSheets