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. Visual Studio2015 Community一些必备插件

    Visual Studio2015 Community一些必备插件 是不是感觉虽然VS2015的代码编辑能力已经很强大了,但是总感觉差了那么一些呢?不用担心,它有很多非常强大的插件,能够让你打代码事半 ...

  2. CI框架深入篇(2)一些基础的我之不知道的标准格式

    1,一些命名规则:类文件名必大写,其他配置文件,视图文件或着脚本都要小写,类文件名和类名要一致!! 2,类名要大写开头,若是多个单词,那就下划线不要驼封法: 3,变量名要小写全,多个单词下划线分割,后 ...

  3. 不容错过的20段CSS代码

    Web开发技术每年都在革新,浏览器已逐渐支持CSS3特性,并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发.但仍然有一些开发者迷恋着一些CSS2代码. 分享20段非常专业的CSS2/CSS3 ...

  4. OUTPUT新增记录入库示例C#+存储过程

    1.C#代码 public int Insert(Entity model) { var parameters = new SqlParameter[] { new SqlParameter(&quo ...

  5. 002_系统表查询（sysdatabases等）

    002_系统表查询(sysdatabases等) --1.获取所有数据库名: SELECT Name FROM Master..SysDatabases ORDER BY Name --2.获取所有表 ...

  6. IOS静态库和Framework区别

    一.什么是库? 库是共享程序代码的方式,一般分为静态库和动态库. 二.静态库与动态库的区别? 静态库:链接时完整地拷贝至可执行文件中,被多次使用就有多份冗余拷贝. 动态库:链接时不复制,程序运行时由系 ...

  7. PHP 类型比较表

    以下的表格显示了 PHP 类型和比较运算符在松散和严格比较时的作用.该补充材料还和类型戏法的相关章节内容有关.同时,大量的用户注释和 » BlueShoes 的工作也给该材料提供了帮助. 在使用这些表 ...

  8. Struts2 手动验证

    * 首先要从页面中获取对应的标签name属性的值,在动作类action中声明同名的属性,提供get和set方法        * 要继承ActionSupport类或者实现Validateable接口 ...

  9. javascript 写一段代码，判断一个字符串中出现次数最多的字符串，并统计出现的次数

    javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数 function test(){ var bt = document.getElementById(" ...

  10. 删除Excel中的打印预览留下的打印线

    Excel 工作表打印后,会留有几条虚线打印线.如下图所示:     不少同学反映,他们尝试了很多操作却仍然无法消除.难道除了重新打开就没有别的办法了? 可以这样做: 在 Excel 2010 中,单 ...