Notice the difference between the code and the traditional DHTML. In DHTML you change the style by directly modifying specific elements on the page, and the code here modifies the style sheet.
View the compatibility List for the dom-css.
Defined
A page always contains one or several style sheets, and a stylesheet contains one or more rules, and a rule has a detailed style declaration. The style sheet for this page is as follows:
Copy Code code 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 aim is to modify the Pre.test white background for #eef0f5.
Style sheet
All outer chains or inline stylesheets can be accessed through document.stylesheets arrays. QUIRKSMODE.CSS, the Web site's common style sheet is kept in document.stylesheets[0]. The Special stylesheet section above is stored in document.stylesheets[1]. We're going to test it on this piece of code.
Cssrules[] and rules[]
A rule is a set of declarations of one or more elements. Here are two ways to access rules. The consortium insists on using cssrules[], while Microsoft insists on rules[]. Both methods are indexed numbers, the first rule is (CSS) rules[0], the second is (CSS) rules[1] and so on.
Copy Code code 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 Code code 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. But browsers don't see it that way.
Safari sees 4 rules:
0, undefined
1, P
2, pre.test[classs~= "test"]+*
3, pre.test[classs~= "test"]
Note Capitalization
Ie7beta3 saw 5:
0, P
1, H2
2, H3
3, Pre.test + *
4, Pre.test
Note Capitalization
Mac IE sees also 5:
0, P
1, H2
2, H3
3, Pre.test * (note no + number)
4, Pre.test
Note Capitalization
Mozilla and Opera 9 see 4:
0, undefined
1, P,h2,h3
2, Pre.test + *
3, Pre.test
Note lowercase
This is a great mess!
1, ie think P,H2,H3 is three rather than a rule, and Safari only take p. I know now 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, in addition to safari to pre.test added unnecessary expressions, this is the best support.
So to visit Pre.test in Safari and Mozilla need cssrules[3], and IE is rules[4], the early Mozilla is cssrules[5]. It's cute, isn't it?
No key words
So if you use index values, the problem is very serious. We would like to visit this:
document.stylesheets[1].cssrules[' pre.test ' so I can access the style sheet rules of the PRE. But the web or other browsers do not seem to need such a way to access the style sheet. But all the documents remain silent on this issue.
This failure means you basically can't access the rules.
Style declaration
Let's say we've accessed a rule. Now you need to change one of these statements. The expression is as follows:
Copy Code code as follows:
Rule.style.color = ' #0000cc ';
The methods of the consortium are:
Copy Code code as follows:
Rule.style.setProperty (' Color ', ' #00cc00 ', null);
Because Style.color is so much simpler, I don't want to use this seproperty ().
Example
To change the color of the pre, the code is as follows:
To be sure, I wrote the pre rules in the last one. It's ugly, but it's the only way:
Copy Code code 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
Reprint please keep the following information
Author: North Jade (TW: @rehawk)
