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
Copy codeThe Code is as follows:
<Link href1_1_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:
Copy codeThe Code is as follows:
<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:
Copy codeThe 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:
In this example, the name of a function 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.
In addition, to change the style of the entire page, you need to define the height of the body as 100% in the style sheet file.
Method 2:
Step 1: import two sets of css files
Copy codeThe Code is as follows:
<Link rel = "stylesheet" type = "text/css" title = "style A" href = "css/people1.css"/>
<Link rel = "alternate stylesheet" type = "text/css" title = "style B" href = "css/lele2.css"/>
Step 2: Write the js function for switching
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var title = "style ";
Function setStyle (){
// Only switch between style A and style B
If (title = "style "){
Title = "style B ";
} Else {
Title = "style ";
}
Var I, links;
// Use the dom method to retrieve all link elements
Links = document. getElementsByTagName ("link ");
// Determine whether each link element contains a style string to determine whether the link element is a style table link and whether the link contains the title attribute.
For (I = 0; links [I]; I ++ ){
If (links [I]. getAttribute ("rel"). indexOf ("style ")! =-1 & links [I]. getAttribute ("title ")){
// Set all links to disabled
Links [I]. disabled = true;
// Determine whether a specified title string exists in the title. Set the current link to visible to activate the current link.
If (links [I]. getAttribute ("title"). indexOf (title )! =-1 ){
Links [I]. disabled = false;
// Alert ("OK ");
}
}
}
}
</Script>
Step 3: Call the switched js function in the html Tag
Copy codeThe Code is as follows:
<A href = "#" onclick = "setStyle ();"> 1 </a>
<A href = "#" onclick = "setStyle ();"> 2 </a>
<A href = "#" onclick = "setStyle ();"> 3 </a>
<A href = "#" onclick = "setStyle ();"> 4 </a>
<A href = "#" onclick = "setStyle ();"> 5 </a>