Implement multiple CSS styles on a page using JS

Step 1: Define an ID in the element connecting to the style sheet, for example CopyCode The Code is as follows: <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:

Copy code The 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 code 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.