JavaScript，點擊button改變頁面背景和字體顏色，網頁有N顏色的變化button。點擊不同button，網頁字體和背景將被改變為不同的顏色。
非常easy的JavaScript小程序。
一、基本目標
一打開網頁首先提示問候信息“你好”
網頁中有N個改變顏色的button，當中返回是返回網頁的默認顏色，背景是白的，字體是黑的
點擊不同的button。網頁的字體與背景就會改變成不同的顏色。
本來想做出彩虹起色的，但原理全然一樣就不多寫button了。
二、基本思想
關鍵是對body標簽與字體js提供id。使其在js中得到控制。本例提供了對js函數的應用。
三、制作過程
就一個簡單的小頁面，詳情看凝視：
<!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換背景顏色</title>
<!--這段相同可以分離到一個js文件中面去，但這段代碼實在是太短了，就沒有必要了-->
<script type="text/javascript">
//onload相當於本網頁的構造函數。onunload相當於本網頁的析取函數
function load() {
alert("你好！");
}
function unload() {
alert("再見！");
}
function Changecolor(bcolor, fcolor) {
//相當於對於字體<span style="color:傳過來的fcolor">這樣。改變字體的顏色
document.getElementById("body").style.background = bcolor;
document.getElementById("ziti").style.color = fcolor;
}
</script>
</head>
<!--關鍵給整個網頁與行內字體提供一個id。JS中的getElementById()方法可以輕松控制CSS中的東西-->
<body onload="load()" onunload="unload()" id="body">
<span id="ziti">js</span>
<br />
<!--注意在雙引號中傳遞參數時，原來的雙引號要變成單引號。onclick的值是一旦點擊本按鈕就被激發的東西-->
<input onclick="Changecolor('#ff0000','#ffffff')" type="button"
value="赤" />
<input onclick="Changecolor('#ff9900','#ffffff')" type="button"
value="橙" />
<input onclick="Changecolor('#ffff00','#000000')" type="button"
value="黃" />
……
<input onclick="Changecolor('#ffffff','#000000')" type="button"
value="返回" />
</body>
</html>
onunload()函數差點兒僅在IE關閉本頁面時中有效。並且本對話框不會在最前端。谷歌瀏覽器則沒有不論什么效果。因此。此函數意義不大。
版權聲明：本文博主原創文章。博客，未經同意不得轉載。