快捷導(dǎo)航

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

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

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

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

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

一、基本目標(biāo)

一打開(kāi)網(wǎng)頁(yè)首先提示問(wèn)候信息“你好”

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

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

本來(lái)想做出彩虹起色的，但原理完全一樣就不多寫(xiě)按鈕了。

二、基本思想

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

三、制作過(guò)程

就一個(gè)簡(jiǎn)單的小頁(yè)面，詳情看注釋：

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

        <!--這段同樣可以分離到一個(gè)js文件里面去，但這段代碼實(shí)在是太短了，就沒(méi)有必要了-->  

        <script type="text/javascript">  

//onload相當(dāng)于本網(wǎng)頁(yè)的構(gòu)造函數(shù)，onunload相當(dāng)于本網(wǎng)頁(yè)的析取函數(shù)  

function load() {  

    alert("你好！");  

}  

function unload() {  

    alert("再見(jiàn)！");  

}  

function Changecolor(bcolor, fcolor) {  

    //相當(dāng)于對(duì)于字體<span style="color:傳過(guò)來(lái)的fcolor">這樣，改變字體的顏色  

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

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

}  

</script>  

    </head>  

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

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

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

        <br />  

        <!--注意在雙引號(hào)中傳遞參數(shù)時(shí)，原來(lái)的雙引號(hào)要變成單引號(hào)，onclick的值是一旦點(diǎn)擊本按鈕就被激發(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>