Export (0) Print
Expand All

IHTMLStyleSheet::removeRule method

Deletes an existing style rule for the styleSheet object, and adjusts the index of the rules collection accordingly.

Syntax


Integer removeRule(
  [in, optional]  Integer iIndex
);

Parameters

iIndex [in, optional]

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

Remarks

The document does not automatically reflow when the rule is removed. To see the change, you must reflow the document. You can reflow the objects affected using a number of methods. For example, you can reflow the style change only on affected text by setting the text equal to itself. Alternately, you can reload the entire document using the reload method. When you use the refresh method on a table, its content is reflowed.

Examples

This example uses the removeRule method to delete a rule from the rules collection, which causes the text to reflow according to the new rules.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/removeRule.htm


<!DOCTYPE html>
<html>
<head>
  <title>removeRule</title>
  <style>
    p {
      color: green;
    }
  </style>
</head>

<body style="margin-left: 1em">
  <p id="oEffectRules">This text will change in response to the <strong>addRule</strong> and <strong>removeRule</strong> methods.</p>
  <p>The embedded stylesheet specifies <strong>p {color: green;}</strong>. Adding a rule will add the rule <strong>p {font-size:18pt}</strong> to the first (in our case, only) stylesheet.</p>
  <p>
    Removing a rule deletes whichever rule is specified. If no index value 
    is specified in the <strong>removeRule</strong> method, then the last rule in the rules collection of the specified stylesheet will be deleted.
  </p>
  <button onclick="addTheRule()">Add a rule</button>
  <button onclick="removeTheRule()">Remove a rule</button>
  <script>
    function addTheRule() {
      var iSheets = document.styleSheets.length;

      // make sure there is a stylesheet to add to
      if (0 < iSheets) {
        document.styleSheets[iSheets - 1].addRule("p", "font-size:18pt");
        document.getElementById('oEffectRules').innerHTML = oEffectRules.innerHTML;
        console.log("The stylesheets array length is " + document.styleSheets.length + "\nThe rules array length is " + document.styleSheets[iSheets - 1].rules.length);
      }
    }

    function removeTheRule() {
      var iSheets = document.styleSheets.length;
      var iRules = document.styleSheets[iSheets - 1].rules.length;

      // make sure there is a rule to delete
      if (1 < iRules) {
        document.styleSheets[iSheets - 1].removeRule(1);
        document.getElementById('oEffectRules').innerHTML = oEffectRules.innerHTML;
        console.log("The stylesheets array length is " + document.styleSheets.length + "\nThe rules array length is " + document.styleSheets[iSheets - 1].rules.length);
      }
    }
  </script>
</body>
</html>

See also

IHTMLStyleSheet
styleSheet
Reference
addRule
rules
styleSheets

 

 

Show:
© 2014 Microsoft