This article describes the JavaScript method to change the background and font color of the web page. Share it for your reference. The specific analysis is as follows:
JavaScript, by clicking the button to change the color of the web page background and font. There are N buttons to change the color in the web page. Clicking different buttons, the font and background of the web page will change to different colors. Very simple JavaScript applet.
1. Basic Objectives
As soon as you open the web page, you will first prompt the greeting message "Hello"
There are N buttons to change the color in the web page, where return is the default color of the web page, 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.
I originally wanted to make a rainbow improvement, but the principle is exactly the same, so I won’t write more buttons.
2. Basic ideas
The key is to provide ids for body tags and fonts js so that they can be controlled in js. This example provides an application to js functions.
3. Production process
Just a simple small page, please see the comments for details:
Copy the code as follows:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js change background color</title>
<!--This paragraph can also be separated into a js file, but this code is too short, so there is no need-->
<script type="text/javascript">
//onload is equivalent to the constructor of this web page, and onunload is equivalent to the disjunction function of this web page
function load() {
alert("Hello!");
}
function unload() {
alert("Goodbye!");
}
function Changecolor(bcolor, fcolor) {
//Equivalent to changing the color of the font for the font <span style="color:passed fcolor">
document.getElementById("body").style.background = bcolor;
document.getElementById("ziti").style.color = fcolor;
}
</script>
</head>
<!--The key is to provide an id for the entire web page and line fonts. The getElementById() method in JS can easily control things in CSS-->
<body onload="load()" onunload="unload()" id="body">
<span id="ziti">js</span>
<br />
<!--Note that when passing parameters in double quotes, the original double quotes will become single quotes. The value of onclick is something that will be triggered once this button is clicked->
<input onclick="Changecolor('#ff0000','#ffffff')" type="button"
value="red" />
<input onclick="Changecolor('#ff9900','#ffffff')" type="button"
value="orange" />
<input onclick="Changecolor('#ffff00','#000000')" type="button"
value="yellow" />
...
<input onclick="Changecolor('#ffffff','#000000')" type="button"
value="Return" />
</body>
</html>
The onunload() function is almost only valid when IE closes this page, and this dialog box will not be in the front end, and Google Chrome has no effect. Therefore, this function has little significance.
Friends who are interested in JS color operation skills can also refer to the online tool:
RGB color encoding generator
Online web color matching tool
RGB color query comparison table_color code table_colour English name collection
I hope this article will be helpful to everyone's JavaScript programming.