[Translation] JavaScript CSS modification learning Chapter 3: modifying Style Sheets

Document directory

• Style Sheet
• Cssrules [] and rules []
• Number of rules
• No keywords
• Style Declaration

In this chapter, I plan to modify the background color of the PRE by directly modifying the style sheet of the page instead of accessing the element. Unfortunately, the severe incompatibility of browsers makes this code basically unavailable.

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:

<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.
var theRules = new Array();if (document.styleSheets[1].cssRules)theRules = document.styleSheets[1].cssRuleselse if (document.styleSheets[1].rules)theRules = document.styleSheets[1].rules
Now therules includes all style rules.
Number of rules
This is a style sheet:
@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.styleSheets[1].cssRules['PRE.test']
In this way, I can access the pre style table 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:
rule.style.color = '#0000cc';
The W3C method is:
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:
function changeIt() {if (!document.styleSheets) return;var theRules = new Array();if (document.styleSheets[1].cssRules)theRules = document.styleSheets[1].cssRuleselse if (document.styleSheets[1].rules)theRules = document.styleSheets[1].ruleselse return;theRules[theRules.length-1].style.backgroundColor = '#EEF0F5';}
 
 
Http://www.quirksmode.org/dom/changess.html