Home > Developer > Web Develop
You can add style information in one HTML document in three Ways:
1. Referencing external style sheets by <link> elements;
2. Add style information to the head of the document by <style> element;
3. Specify style information through the style attribute on the specific document Element.
The third style information can be manipulated in the DOM through the element Node's style Property.
The first two style information is manipulated in the DOM by the properties and methods of the Cssstylesheet Object.
The Cssstylesheet object has an official document that specifies the Cssrules property, which represents a collection of style rules for the style sheet (the first two style sheets above) (each style rule contains a CSS selector, curly braces, and key-value pairs in parentheses).
There is also a rules property that is not officially specified, which is the proprietary property of the Cssrules attribute implemented in earlier versions of IE (at least IE11 is supported for Cssrules properties).
See below for an example.
Example 1 case of referencing an external style sheet through the <link> element
Code for the HTML document:
1 <!DOCTYPE HTML Public "-//w3c//dtd XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">2 <HTMLxmlns= "http://www.w3.org/1999/xhtml">3 <Head>4 <Metahttp-equiv= "content-type"content= "text/html; charset=utf-8" />5 <title>Manipulating style Sheets</title>6 <Linkrel= "stylesheet"type= "text/css"href= "theme.css" />7 <styletype= "text/css">8 #ul1{9 Height:3em;Ten Background-color:Pink; one } a </style> - </Head> - <Body> the <PID= "p1">OnQ</P> - <H1>Manipulating style Sheets</H1> - <ulID= "ul1"> - <Li>One</Li> + <Li>Both</Li> - </ul> + <inputtype= "button"value= "replace"onclick= "test ();"ID= "replace" /> a <inputtype= "button"value= "clone"onclick= "clon ();" /> at <inputtype= "button"value= "remove"onclick= "remove ();" /> - <inputtype= "button"value= "recovery"onclick= "recovery ();" /> - <Scripttype= "text/javascript"> - functionTest () { - //the first method of obtaining an external style sheet - varLink1=document.stylesheets[0]; in - //the second way to get an external style sheet to vara=document.getElementsByTagName ("Link")[0]; + varLink2=A.sheet||a.stylesheet; - //Comparison of the results of two different methods the Alert (link1==link2);//true * $ //get the CSS code from the external style sheetPanax Notoginseng varrules=Link1.cssrules||link1.rules; - the //attempt to output all style rules + Alert (rules.csstext);//undefined a the //get the first style rule in an external style sheet + varRule=rules[0]; - //output The first style rule $ Alert (rule.csstext); $ - } - //bind the test () function to the onclick event of the Replace button the </Script> - </Body>Wuyi </HTML>
The code for the external style sheet (file name is theme.css):
1 #p1{2 Background-color:#20B2AA;3 Color:#FAF0E6;4 Font-weight:Bold;5 font-size:2em;6 font-family:"times New Roman", georgia,serif;7}8 9 H1{Ten font-family:"times New Roman", georgia,serif; one Background-color:#3CB371; a}
Operating conditions in IE11:
How it works in Firefox:
The 40th line of code in the HTML document in Chrome error: uncaught typeerror:cannot Read property ' Csstext ' of Null.
If you comment out the 40th line of code (alert (rules.csstext) in the test () function,//undefined), and then run in chrome, the following information is displayed in developer Tools:
The value of the Cssrules property and the Rules property are Null.
Example 1 shows that for an <link> element referencing an external style sheet, chrome cannot get CSS rules from the Cssrules property and the rules property, while Firefox and IE Can.
What about the style information that is added to the <style> element? Look at the following Example.
Example 2 when adding style information to the head of a document through the <style> element
The code for example 2 is almost identical to the code in example 1, as long as you change one of several characters:
Replace the 28th line of code in the HTML document with the number 0 in brackets to 1;
Change the link string in line 31st to the style string;
When you're done with chrome, firefox, and internet explorer, you'll see that the code works in all three browsers, and the output is the Same.
Summarize
Using the above two examples to know the external style sheet for the <link> element reference, Chrome does not know how to get the style rules through the Cssrules property, while Firefox and IE Can. For style information added through the <style> element, three browsers can get style rules from the Cssrules Property.
PS. not only can you get style rules through the Cssrules property, but you can also modify a specific rule by cssstylesheet the style property of the object (not the style property of the element node), but this change will reflect the style of all the HTML elements associated with the rule, as shown in "javascript Advanced Programming (third edition)", page 319.
Cssrules compatibility in different browsers
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
