Home > Developer > JavaScript
JavaScript implements the method of changing the webpage background and font color, and javascript webpage background
This example describes how to change the webpage background and font color using JavaScript. Share it with you for your reference. The specific analysis is as follows:
JavaScript: click the button to change the color of the background and font of the webpage. There are N buttons for changing the color of the webpage. Click different buttons to change the font and background of the webpage to different colors. Simple JavaScript applet.
I. Basic Objectives
When you open the webpage, the system first prompts "hello"
There are N buttons in the webpage that change the color. The returned result is the default color of the webpage, the background is white, and the font is black.
Click different buttons to change the font and background of the webpage to different colors.
I wanted to make a rainbow, but I didn't need to write more buttons in the same principle.
Ii. Basic Ideas
The key is to provide an id for the body label and the font js to control it in js. This example provides applications for js functions.
Iii. Production Process
For details on a simple small page, see the notes:
Copy codeThe Code is 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 for background color </title>
<! -- This section can also be separated into a js file, but this section of code is too short to be necessary -->
<Script type = "text/javascript">
// Onload is equivalent to the constructor of the current page, and onunload is equivalent to the analysis function of the current page.
Function load (){
Alert ("Hello! ");
}
Function unload (){
Alert ("goodbye! ");
}
Function Changecolor (bcolor, fcolor ){
// It is equivalent to changing the font color when <span style = "color: 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 webpage and the font in the row. 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 parameters are passed in double quotation marks, the original double quotation marks must be changed to single quotation marks. The onclick value is the one that is triggered once you click this button. -->
<Input onclick = "Changecolor ('# ff0000', '# ffff')" type = "button"
Value = "Chi"/>
<Input onclick = "Changecolor ('# ff9900', '# ffff')" type = "button"
Value = "orange"/>
<Input onclick = "Changecolor ('# ffff00',' #000000 ')" type = "button"
Value = "yellow"/>
......
<Input onclick = "Changecolor ('# ffff',' #000000 ')" type = "button"
Value = "return"/>
</Body>
</Html>
The onunload () function is only valid when IE closes this page, and this dialog box is not at the frontend. Google Chrome does not have any effect. Therefore, this function is of little significance.
I hope this article will help you design javascript programs.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
