js implements two sets of css switching codes for a single html page_javascript skills

Today I studied the effect of using the setAttribute method of JS to implement two style sheets on one page. The specific method is as follows:
Step 1: Define an id in the element connecting the style sheet, such as

Copy code The code is as follows:

The id I defined is css.
Step 2: Write a js function, the code is as follows:

Copy the code The code is as follows:

The code of this function can be placed anywhere on the page.
Step 3: Add a function trigger event for the connection to change the style sheet of the page. The code is as follows:

Copy the code The code is as follows:

1.css
2.css

This effect has been tested under both IE and FF. I believe everyone will understand it after reading it. Using this method we You can let the viewer choose the style sheet that needs to be displayed. For example, the elderly can choose a style sheet with a larger font. Two points to note here are:
In this example, the name after the function name cannot be links or link. If it is links or link, the style sheet will not be changed. I don’t know the specific reason. Maybe It is a reserved character of JavaScript.
In addition, if you want to change the style of the entire page, you need to define the body height as 100% in the style sheet file

Method 2:
Step 1: Import two sets of css files

Copy code The code is as follows:

As follows:

Step 3: Call the switching js function in the html tag




Copy code


The code is as follows:

1
2

3 4 5