• A+

【JavaScript】轻易改变的背景和字体颜色页面

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">//"color:传过来的fcolor">这样。改变字体的颜色 document.getElementById("body").style.background = bcolor; document.getElementById("ziti").style.color = fcolor; } </script> </head> <!--关键给整个网页与行内字体提供一个id。JS中的getElementById()方法可以轻松控制CSS中的东西--> <body "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关闭本页面时中有效。并且本对话框不会在最前端。谷歌浏览器则没有不论什么效果。因此。此函数意义不大。

 
所属分类:前端

 0 条回应

我有话说:
    ×