JavaScript method to change web page background and font color_javascript skills

The example in this article describes how to use JavaScript to change the background and font color of a web page. Share it with everyone for your reference. The specific analysis is as follows:

JavaScript, change the color of the background and font of the web page by clicking the button. There are N buttons to change the color on the web page. Clicking different buttons will change the font and background of the web page to different colors. A very simple JavaScript applet.

1. Basic goals

When opening the web page, the first greeting message "Hello" will be prompted

There are N buttons that change colors in the webpage. Return is the default color for returning to the webpage. The background is white and the font is black

Click different buttons, and the font and background of the web page will change to different colors.

Originally I wanted to make a rainbow effect, but the principle is exactly the same so I won’t write more buttons.

2. Basic ideas

The key is to provide ids to the body tag and font js so that they can be controlled in js. This example provides the application of js function.

3. Production process

Just a simple small page, please see the notes for details:

Copy code The code is as follows:

          
                                                                                                                              ​​​​
          



                                                                                                                                                                                                                                                         ​​​​
                                                                                                                    through                           value="orange" />
                             value="yellow" />                                                 …                                                                                                                                                                       value="return" />

The onunload() function is almost only effective when IE closes this page, and this dialog box will not be on the front end, and Google Chrome will have no effect. Therefore, this function does not make much sense.

Friends who are interested in js color manipulation techniques can also refer to online tools:

RGB Color Coding Generator

Online web color matching tool

RGB color query comparison table_color code table_complete English name of colors

I hope this article will be helpful to everyone’s JavaScript programming design.