Home > Web Front-end > JS Tutorial > body text

Use JS to implement multiple css styles on one page_javascript skills

WBOY
Release: 2016-05-16 19:04:09
Original
932 people have browsed it

Step 1: Define an id in the element connected to the style sheet, such as

Copy the 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 code The code is as follows:

This effect has been tested under both IE and FF. I believe everyone will be very happy after reading it. Obviously, using this method we 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:
1. 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. , may be a reserved character of JavaScript.
2. 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.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template