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关闭本页面时中有效。并且本对话框不会在最前端。谷歌浏览器则没有不论什么效果。因此。此函数意义不大。

版权声明：本文博主原创文章。博客，未经同意不得转载。

【JavaScript】轻易改变的背景和字体颜色页面的更多相关文章

  1. phpstorm调整背景、字体颜色

    从这个网站(http://phpstorm-themes.com/)下载各类主题的xml文件, 然后将文件放到phpStorm的文件夹中,比如:C:\Users\USERNAME\.PhpStorm2 ...

  2. ListBox 如何改变某行的字体颜色

    Option Explicit Private Type RECT Left As Long Top As Long Right As Long Bottom As Long End Type Pri ...

  3. (转)Android 自定义 spinner (背景、字体颜色)

    Android 自定义 spinner (背景.字体颜色) (2012-07-04 17:04:44)   1.准备两张图片,并做好9.png   2.在drawable中定义spinner_sele ...

  4. 改变input的placeholder字体颜色

    改变input的placeholder字体颜色,注意哦,只是placeholder的字,用户输入的字不可以 input::-webkit-input-placeholder{ coloc:#000; ...

  5. MFC设置静态文本框，编辑框等控件背景和字体颜色

    在MFC类库提供了CWnd::OnCtlColor函数,在工作框架的子窗口被重画时将调用该成员函数.因此可以重载WM_CTLCOLOR消息的响应函数.此函数的原型:afx_msg HBRUSH OnC ...

  6. 一个div里有多个a标签，改变a标签的字体颜色方法

    <script type="text/javascript">var all=document.getElementById("big");var ...

  7. 改变textView的个别字体颜色

    Spannable span = new SpannableString(getString(R.string.register_need_to_ageree));//例如:register_need ...

  8. wp8 入门到精通 Animation 背景加字体颜色从下向上变化颜色效果

    <phone:PhoneApplicationPage.Resources> <Style x:Key="ButtonStyle1" TargetType=&qu ...

  9. Ext.grid.panel 改变某一行的字体颜色

    grid.getStore().addListener('load', handleGridLoadEvent); function handleGridLoadEvent(store, record ...

随机推荐

  1. java -jar start.jar和nohup java -jar xxx.jar > test.log &的区别

    nohup用在什么地方? KD3EE49RD38

  2. GridView and DropDownList

    <form id="form1" runat="server"> <div> <asp:GridView runat=" ...

  3. new关键字在虚方法的动态调用中的阻断作用

    关于new关键字在虚方法动态调用中的阻断作用,也有了更明确的理论基础.在子类方法中,如果标记 new 关键字,则意味着隐藏基类实现,其实就是创建了与父类同名的另一个方法,在编译中这两个方法处于动态方法 ...

  4. Repeater的ItemDataBound 事件中e.Item.DataItem 的数据类型

    1.使用DataSet和DataTable绑定数据源时 DataRowView view = (DataRowView)e.Item.DataItem; 2.DataReader绑定数据源时 Syst ...

  5. MySQL导入导出命令

    前言 如果使用图形化界面,那么可以通过几个点击即可导入.导出.本文是假定你没有安装那些如Navicat等GUI管理软件. 场景 假设在电脑A和电脑B中都装有MySQL数据库管理系统,并且在电脑A的My ...

  6. 在iptables和selinux中放行smb服务

    配置selinux [root@localhost samba]# getsebool -a | grep samba 查找selinux中对samba的限制项samba_domain_control ...

  7. JavaScript 客户端JavaScript之 脚本化文档

    客户端JavaScript的存在把静态HTML转变为交互式的Web应用程序,脚本化Web页面的内容正是JavaScript存在的理由.   一个文档对象模型或者说DOM就是一个API,它定义了如何访问 ...

  8. 读取XML文件的几种方式的效率分析

    第一种:使用XmlReader来读取. Stopwatch sw = Stopwatch.StartNew(); List<Dictionary<string, string>> ...

  9. OREACLE 数据库建表 添加判断表是否存在 不存在则新建

    declare  cnt number; begin   ---查询要创建的表是否存在   select count(*)into cnt from user_tables where table_n ...

  10. [欢度国庆]为什么我们今天还要学习和使用C++？（转载）

    在各种新的开发语言层出不穷的今天,在Java和C#大行其道今天,我们为什么还要学习和使用C++?现在学习C++将来有用吗?学习C++要花费那么多时间和精力,这一切都值得吗?现在学习C++有钱途吗? 这 ...