Click to Rate and Give Feedback
MSDN
MSDN Library
Web Development
HTML and CSS
CSS Reference
Methods
 addRule Method

  Switch on low bandwidth view
addRule Method

Creates a new rule for a style sheet.

Syntax

plNewIndex = object.addRule(sSelector, sStyle [, iIndex])

Parameters

sSelector Required. String that specifies the selector for the new rule. Single contextual selectors are valid. For example, "div p b" is a valid contextual selector.
sStyle Required. String that specifies the style assignments for this style rule. This style takes the same form as an inline style specification. For example, "color:blue" is a valid style parameter.
iIndex Optional. Integer that specifies the zero-based position in the rules collection where the new style rule should be placed.
-1
Default. The rule is added to the end of the collection.

Return Value

Reserved. Always returns -1.

Remarks

You can add up to 4095 style rules with the addRule method. After that, the method returns an "Invalid Argument" exception.

You can apply rules to a disabled styleSheet, but they do not apply to the document until you enable the styleSheet.

Example

This example uses the addRule method to add a rule that sets all bold text appearing in a DIV to the color blue.

<STYLE>
</STYLE>

<DIV>
Internet Explorer makes <B>HTML</B> dynamic.
</DIV>

<SCRIPT>
   var new_rule;
   new_rule = document.styleSheets[0].addRule("DIV B", "color:blue", 0);
</SCRIPT>

Standards Information

There is no public standard that applies to this method.

Applies To

styleSheet, CSSStyleSheet Constructor

See Also

Tags What's this?: Add a tag
Community Content   What is Community Content?
Add new content RSS  Annotations
Upper limit is 4095      John Sudds   |   Edit   |   Show History

You can only create 4095 style rules with this method. After that, it throws an "Invalid argument" exception.

The same limit applies even if you append style rules using the cssText property.

BTW, the following code is much faster than repeatedly invoking addRule for each new rule.

var ss = document.createElement('STYLE');
document.documentElement.firstChild.appendChild(ss);
ss.cssText = '(a very long list of style rules)';

http://msdn2.microsoft.com/en-us/library/ms533698.aspx

'[]' selector bug      eithe   |   Edit   |   Show History
The browser crashes when adding an attribute selector, f.e.
<style></style>
<div alt='hi'></div>
<script>
var new_rule;
new_rule = document.styleSheets[0].addRule("div[alt]", "color:blue", 0);
</script>

tested under: IE 6.0

the same is for > selector... :/

Tags What's this?: bug (x) Add a tag
Flag as ContentBug
Incompatible with pseudo classes      calande   |   Edit   |   Show History
This selector works:

document.styleSheets[0].addRule("body", "display:none");

The following selector won't work:

document.styleSheets[0].addRule("body>table:nth-of-type(2)", "display:none");

You get an "Invalid argument" error message.
Tags What's this?: Add a tag
Flag as ContentBug
Incompatible with pseudo classes      calande   |   Edit   |   Show History
This selector works:

document.styleSheets[0].addRule("body", "display:none");


The following selector won't work:

document.styleSheets[0].addRule("body>table:nth-of-type(2)", "display:none");


You get an "Invalid argument" error message.
Tags What's this?: Add a tag
Flag as ContentBug
Processing
© 2009 Microsoft Corporation. All rights reserved. Terms of Use  |  Trademarks  |  Privacy Statement
Page view tracker