javascript

Chapter 11: DOM Levels 2 and 3
Assuming that this rule is in the first style sheet on the page and is the only style in that style sheet, the
following code can be used to retrieve all of its information:
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
var rule = rules[0];
alert(rule.selectorText);
alert(rule.style.cssText);
alert(rule.style.backgroundColor);
alert(rule.style.width);
alert(rule.style.height);
//get rules list
//get first rule
//”div.box”
//complete CSS code
//”blue”
//”100px”
//”200px”
Using this technique, it ’ s possible to determine the style information related to a rule in the same way
you can determine the inline style information for an element. As with elements, it ’ s also possible to
change the style information, as shown in the following example:
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;
var rule = rules[0];
rule.style.backgroundColor = “red”
//get rules list
//get first rule
Note that changing a rule in this way affects all elements on the page for which the rule applies. If there
are two < div > elements that have the box class, they will both be affected by this change.
Creating Rules
The DOM states that new rules are added to existing style sheets using the insertRule() method. This
method expects two arguments: the text of the rule and the index at which to insert the rule. Here is an
example:
sheet.insertRule(“body { background-color: silver }”, 0);
//DOM method
This example inserts a rule that changes the document ’ s background color. The rule is inserted as the
first rule in the style sheet (position 0)—the order is important in determining how the rule cascades into
the document. The insertRule() method is supported in Firefox, Safari, Opera, and Chrome.
IE has a similar method called addRule() that expects two arguments: the selector text and the
CSS style information. An optional third argument indicates the position in which to insert the rule.
The IE equivalent of the previous example is as follows:
sheet.addRule(“body”, “background-color: silver”, 0);
//IE only
The documentation for this method indicates that you can add up to 4,095 style rules using addRule() .
Any additional calls result in an error.
To add a rule to a style sheet in a cross - browser way, the following method can be used. It accepts four
arguments: the style sheet to add to, followed by the same three arguments as addRule() , as shown in
the following example:
334