JavaScript實現(xiàn)更改網(wǎng)頁背景與字體顏色的方法

更新時間：2015年02月02日 10:16:17 作者：yongh701

這篇文章主要介紹了JavaScript實現(xiàn)更改網(wǎng)頁背景與字體顏色的方法,可實現(xiàn)點擊按鈕改變網(wǎng)頁背景色的功能,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了JavaScript實現(xiàn)更改網(wǎng)頁背景與字體顏色的方法。分享給大家供大家參考。具體分析如下：

JavaScript，通過點擊按鈕更改網(wǎng)頁背景與字體的顏色，網(wǎng)頁中有N個改變顏色的按鈕，點擊不同的按鈕，網(wǎng)頁的字體與背景就會改變成不同的顏色。很簡單的JavaScript小程序。

一、基本目標(biāo)

一打開網(wǎng)頁首先提示問候信息“你好”

網(wǎng)頁中有N個改變顏色的按鈕，其中返回是返回網(wǎng)頁的默認顏色，背景是白的，字體是黑的

點擊不同的按鈕，網(wǎng)頁的字體與背景就會改變成不同的顏色。

本來想做出彩虹起色的，但原理完全一樣就不多寫按鈕了。

二、基本思想

關(guān)鍵是對body標(biāo)簽與字體js提供id，使其在js中得到控制。本例提供了對js函數(shù)的應(yīng)用。

三、制作過程

就一個簡單的小頁面，詳情看注釋：

復(fù)制代碼代碼如下:

<!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相當(dāng)于本網(wǎng)頁的構(gòu)造函數(shù)，onunload相當(dāng)于本網(wǎng)頁的析取函數(shù)  

function load() {  

    alert("你好！");  

}  

function unload() {  

    alert("再見！");  

}  

function Changecolor(bcolor, fcolor) {  

    //相當(dāng)于對于字體<span style="color:傳過來的fcolor">這樣，改變字體的顏色  

    document.getElementById("body").style.background = bcolor;  

    document.getElementById("ziti").style.color = fcolor;  

}  

</script>  

    </head>  

    <!--關(guān)鍵給整個網(wǎng)頁與行內(nèi)字體提供一個id，JS中的getElementById()方法能夠輕松控制CSS中的東西-->  

    <body onload="load()" onunload="unload()" id="body">  

        <span id="ziti">js</span>  

        <br />  

        <!--注意在雙引號中傳遞參數(shù)時，原來的雙引號要變成單引號，onclick的值是一旦點擊本按鈕就被激發(fā)的東西-->  

        <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>