JavaScript CSS modification learning Chapter 3 modify a style sheet

Note the differences between the Code and the traditional DHTML. In DHTML, you can change the style by directly modifying specific elements on the page. The code here modifies the style sheet.
View the compatibility list of W3C DOM-CSS here.
Definition
A page always contains one or several style sheets. A style sheet contains one or more rules, and a rule contains detailed style declarations. The style sheet on this page is as follows:

Copy codeThe Code is as follows: <link rel = "stylesheet" href = "../quirksmode.css">
<Style>
<! --
@ Import url ("test.css ");
P, h2, h3 {
Padding-right: 10px;
}
Pre. test + *{
Margin-right: 20%;
}
Pre. test {
Background-color: # ffffff;
}
-->
</Style>

Our purpose is to modify the white background of pre. test to # EEF0F5.
Style Sheet
All external links or embedded style sheets can be accessed through the document. styleSheets array. Quirksmode.css. The general style sheets of this website are stored in document. styleSheets [0. The special style table section above is saved in document. styleSheets [1]. We will test this code.
CssRules [] and rules []
A rule is a set of declarations of one or more elements. There are two access rules. W3C insisted on using cssRules [], while Microsoft insisted on rules []. Both methods use index numbers. The first rule is (css) Rules [0], and the second rule is (css) Rules [1.Copy codeThe Code is as follows: var theRules = new Array ();
If (document.stylesheets%1%.css Rules)
TheRules = document.stylesheets%1%.css Rules
Else if (document. styleSheets [1]. rules)
TheRules = document. styleSheets [1]. rules

Now theRules includes all style rules. Number of rules
This is a style sheet:Copy codeThe Code is as follows: @ import url ("test.css ");
P, h2, h3 {
Padding-right: 10px;
}
Pre. test + *{
Margin-right: 20%;
}
Pre. test {
Background-color: # ffffff;
}

In your opinion, there may be four rules: @ import followed by p, h2, h3, pre. test + *, and finally pre. test. But the browser does not.
Safari sees four rules:
0. undefined
1. P
2. PRE. test [CLASSS ~ = "Test"] + *
3. PRE. test [CLASSS ~ = "Test"]
Note uppercase
IE7beta3 saw five items:
0, P
1. H2
2. H3
3. PRE. test + *
4. PRE. test
Note uppercase
Mac IE also saw five:
0, P
1. H2
2. H3
3. PRE. test * (note that there is no + number)
4. PRE. test
Note uppercase
Mozilla and Opera 9:
0. undefined
1. p, h2, h3
2. pre. test + *
3. pre. test
Note lower case
Great chaos!
1. IE considers p, h2, and h3 as three rules instead of one, while Safari only takes p. I know that this is an incorrect way of writing.
2. Change the selector to pre. test * for Mac IE. Very serious problem.
3. In addition to adding unnecessary expressions to pre. test by Safari, this is the best support.
Therefore, to access pre. test, cssRules [3] is required in Safari and Mozilla, While IE is rules [4], and earlier Mozilla is cssRules [5]. Cute, isn't it?
No keywords
Therefore, if the index value is used, the problem is very serious. We hope to access:
Document.stylesheets00001).css Rules ['pre. test'] so that I can access the PRE style sheet Rules. However, W3C or other browsers do not need such access to style sheets. However, all documents remain silent on this issue.
This failure means that you basically cannot access the rules.
Style Declaration
Suppose we have accessed a rule. Now you need to change one of the statements. The expression is as follows:Copy codeThe Code is as follows: rule. style. color = '# using CC ';

The W3C method is:Copy codeThe Code is as follows: rule. style. setProperty ('color', '# 00cc00', null );

Because style. color is much simpler, I don't want to use this seProperty ().
Example
The code for changing the pre color is as follows:
To ensure that the pre rules can be used, I wrote them in the last one. Ugly, but this is the only way:Copy codeThe Code is as follows: function changeIt (){
If (! Document. styleSheets) return;
Var theRules = new Array ();
If (document.stylesheets%1%.css Rules)
TheRules = document.stylesheets%1%.css Rules
Else if (document. styleSheets [1]. rules)
TheRules = document. styleSheets [1]. rules
Else return;
TheRules [theRules. length-1]. style. backgroundColor = '# EEF0F5 ';
}

Http://www.quirksmode.org/dom/changess.html
Reprinted please keep the following information
Author: Beiyu (tw: @ rehawk)