JavaScript CSS Modification Learning Chapter 3 Modifying Style Sheet_Basic Knowledge

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

Copy code The code is as follows:

Our purpose is to modify the white background of pre.test to #EEF0F5.
Style Sheets
All external or embedded style sheets can be accessed through the document.styleSheets array. quirksmode.css, the general style sheet of this website is stored in document.styleSheets[0]. The special style sheet section above is stored in document.styleSheets[1]. Let's test it on this code.
cssRules[] and rules[]
A rule is a set of declarations for one or more elements. There are two ways to access rules. The W3C insists on using cssRules[], while Microsoft insists on rules[]. Both methods use index numbers. The first rule is (css)Rules[0], the second rule is (css)Rules[1], and so on.

Copy code The code is as follows:

var theRules = new Array();
if (document.styleSheets[1].cssRules)
theRules = document.styleSheets[1].cssRules
else if (document.styleSheets[1].rules)
theRules = document.styleSheets[1]. rules

TheRules now contains all the style rules. Number of rules
This is the style sheet:

Copy the code The 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 it may be 4 rules: @import then p, h2, h3, then pre.test *, and finally pre.test. However, the browser doesn't see it that way.
Safari sees 4 rules:
0, undefined
1, P
2, PRE.test[CLASSS~="test"] *
3, PRE.test[CLASSS ~="test"]
Note the capitalization
IE7beta3 saw 5 items:
0, P
1, H2
2, H3
3, PRE.test *
4. PRE.test
Note the capitalization
Mac IE also saw 5 entries:
0, P
1, H2
2, H3
3, PRE.test * (note there are no No.)
4. PRE.test
Note the capitalization
Mozilla and Opera 9 saw 4 entries:
0, undefined
1, p,h2,h3
2. pre.test *
3. pre.test
Note the lower case
Great chaos!
1. IE believes that p, h2, and h3 are three rules instead of one, while Safari only takes p. Only now do I realize that this is an incorrect way of writing.
2. Mac IE changed the selector to pre.test *, so the meaning is very different. Very serious problem.
3. Except for Safari adding unnecessary expressions to pre.test, this one has the best support.
So to access pre.test, you need cssRules[3] in Safari and Mozilla, while IE is rules[4], and early Mozilla is cssRules[5]. Very cute, isn't it?
There is no keyword
So if you use index values, the problem will be very serious. We hope to be able to access it like this:
document.styleSheets[1].cssRules['PRE.test'] so that I can access pre's style sheet rules. But W3C or other browsers don't seem to need such a method of accessing style sheets. But all documentation is silent on this issue.
This failure means you basically have no access to the rules.
Style Declaration
Assume we have access to a rule. Now one of the statements needs to be changed. The expression is as follows:

Copy code The code is as follows:

rule.style.color = '#0000cc';

The W3C method is:

Copy code The 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
I plan to change the color of pre. The code is as follows:
To ensure it can be used, I wrote the pre rule at the last one. It's ugly, but this is the only way:

Copy code The code is as follows:

function changeIt () {
if (!document.styleSheets) return;
var theRules = new Array();
if (document.styleSheets[1].cssRules)
theRules = document.styleSheets[1 ].cssRules
else if (document.styleSheets[1].rules)
theRules = document.styleSheets[1].rules
else return;
theRules[theRules.length-1].style .backgroundColor = '#EEF0F5';
}

Translation address: http://www.quirksmode.org/dom/changess.html
Please keep the following information for reprinting
Author: Beiyu (tw:@rehawk)