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. spring源码分析

    编译问题 spring-4.0.5.release编译是用jdk8编译的,为啥可以运行在jdk7的环境? 源码分析 spring源码分析,由一个点各个击破,比如依赖注入,autowired. spri ...

  2. svn和git比较

    svn有哪些优点和缺点? git有哪些优点和缺点? git最突然的优点就是gitflow,开发新的功能都是开一个新分支feature,完成开发新特性,合并到develop分支:提交测试也是新增一个分支 ...

  3. telnet与tnsping

    在cmd 下面 tnsping ZCGL ZCGL这个是在oracle做好的数据库连接. telnet IP地址 加上端口号. 查看视图的编写语句 select dbms_metadata.get_d ...

  4. zepto源码研究 - zepto.js - 5(dom属性管理)

    index: $.fn = {...... indexOf: emptyArray.indexOf,} index: function(element){ //这里的$(element)[0]是为了将 ...

  5. Delphi 串口打印机打印

    一.硬件准备 打印机: 打印机必须具有串口,没有标配串口的打印机,必须购买串口卡,串口卡的型号请参考随机<操作手册>. 计算机: 计算机必须具有串口,计算机通常具有两个串口:COM1和CO ...

  6. 详解CSS选择器、优先级与匹配原理

    原文链接:http://polaris1119.javaeye.com/blog/764428 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个 ...

  7. DoingOrder.aspx.cs缓存的使用方法

    using System; using System.Web.UI; using System.Data; using System.Text; using BLL = SmartWaterSys.B ...

  8. java学习笔记(12) —— Struts2 通过 xml /json 实现简单的业务处理

    XML 1.引入dom4j-2.0.0.jar 2.引入jquery-1.8.2.js 3.新建common.js getInfo = function(){ $.post("getXmlA ...

  9. apache配置多站点

    在httpd.conf文件中,有如下配置(注:舍去httpd.conf文件的注释内容) Listen 80 ServerName localhost <Directory /> Allow ...

  10. ARC - strong和weak指针

    ARC指南1 - strong和weak指针   提示:本文中所说的"实例变量"即是"成员变量","局部变量"即是"本地变量&qu ...