Today I have studied how JS uses the setAttribute method to implement two style sheets on a page. The specific method is as follows:
Step 1: Define an id in the element connecting to the style sheet, for example
<Link href = "1.css" rel =" stylesheet "type =" text/css "id =" css ">
The id I define is css.
Step 2: Write a js function with the following code:
<Script type = "text/javascript">
Function change (){
Var css = document. getElementById ("css ");
If (a = 1)
Css. setAttribute ("href", "1.css ");
If (a = 2)
Css. setAttribute ("href", "2.css ");
}
</Script>
The code of this function can be stored anywhere on the page.
Step 3: Add a function trigger event to change the style sheet connection. The Code is as follows:
<A href = "#" onClick = "change (1)"> 1.css</a>
<A href = "#" onClick = "change (2)"> 2.css</a>
This effect has been tested in IE and FF. I believe it is very clear after reading it. With this method, we can allow the viewer to select the style sheet to be displayed, for example, you can select a style sheet with a large font. Note the following two points:
1. In this example, the name after several functions cannot be links or link. If it is links or link, the style sheet will not be changed. I am not sure about the specific reason, it may be a reserved character of javascript.
2. If you want to change the style of the entire page, you need to define the height of the body as 100% in the style sheet file.