【JavaScript】轻松更改网页背景与字体的颜色
2014-10-22 20:34
337 查看
JavaScript,通过点击按钮更改网页背景与字体的颜色,网页中有N个改变颜色的按钮,点击不同的按钮,网页的字体与背景就会改变成不同的颜色。很简单的JavaScript小程序。
一、基本目标
一打开网页首先提示问候信息“你好”
网页中有N个改变颜色的按钮,其中返回是返回网页的默认颜色,背景是白的,字体是黑的
点击不同的按钮,网页的字体与背景就会改变成不同的颜色。
本来想做出彩虹起色的,但原理完全一样就不多写按钮了。
二、基本思想
关键是对body标签与字体js提供id,使其在js中得到控制。本例提供了对js函数的应用。
三、***过程
就一个简单的小页面,详情看注释:
onunload()函数几乎仅在IE关闭本页面时中有效,而且本对话框不会在最前端,谷歌浏览器则没有任何效果。因此,此函数意义不大。
一、基本目标
一打开网页首先提示问候信息“你好”
网页中有N个改变颜色的按钮,其中返回是返回网页的默认颜色,背景是白的,字体是黑的
点击不同的按钮,网页的字体与背景就会改变成不同的颜色。
本来想做出彩虹起色的,但原理完全一样就不多写按钮了。
二、基本思想
关键是对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关闭本页面时中有效,而且本对话框不会在最前端,谷歌浏览器则没有任何效果。因此,此函数意义不大。
相关文章推荐
- JavaScript实现更改网页背景与字体颜色的方法
- JavaScript实现更改网页背景与字体颜色的方法
- 如何更改Eclipse的字体和背景颜色
- gvim 高亮关键字 开关行号和自动缩进,更改字体,更改行号颜色和背景颜色
- JavaScript控制网页背景随机不停的变换颜色
- IOS 如何更改导航栏样式及状态栏字体颜色(导航栏背景、前景、标题及返回字体颜色)
- U盘加背景图片,改图标,修改字体颜色,把文件夹变彩色,更改文件夹背景
- ActionBarSherlock 标题栏字体与背景颜色更改
- 更改系统的窗口颜色后,网页的背景不能显示
- 如何更改命令行窗体背景字体颜色
- JavaScript让网页出现渐隐渐显背景颜色的方法
- 改变网页中的浏览风格(字体大小和背景颜色)
- 如何更改Eclipse的字体和背景颜色
- iOS开发 设置整个导航栏背景图、字体及标签栏更改选中背景图的颜色
- 如何更改Eclipse的字体和背景颜色?
- ubuntu eclipse 更改提示框背景和字体颜色
- 更改MyEclipse颜色方案后,打开JSP文件,JavaScript背景发白问题的解决方法。
- ubuntu eclipse 更改提示框背景和字体颜色
- JavaScript让网页出现渐隐渐显的背景颜色
- eclipse更改字体大小、更改背景颜色、SVN插件错误