JavaScript实现更改网页背景与字体颜色的方法


Posted in Javascript onFebruary 02, 2015

本文实例讲述了JavaScript实现更改网页背景与字体颜色的方法。分享给大家供大家参考。具体分析如下:

JavaScript,通过点击按钮更改网页背景与字体的颜色,网页中有N个改变颜色的按钮,点击不同的按钮,网页的字体与背景就会改变成不同的颜色。很简单的JavaScript小程序。

一、基本目标

一打开网页首先提示问候信息“你好”

JavaScript实现更改网页背景与字体颜色的方法

网页中有N个改变颜色的按钮,其中返回是返回网页的默认颜色,背景是白的,字体是黑的

JavaScript实现更改网页背景与字体颜色的方法

点击不同的按钮,网页的字体与背景就会改变成不同的颜色。

本来想做出彩虹起色的,但原理完全一样就不多写按钮了。

二、基本思想

关键是对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实现更改网页背景与字体颜色的方法

关于js颜色操作技巧感兴趣的朋友还可参考在线工具:

RGB颜色编码生成器

在线网页配色工具

RGB颜色查询对照表_颜色代码表_颜色的英文名称大全

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery动态加载js三种方法实例
Aug 03 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 #Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 #Javascript
JQuery动画与特效实例分析
Feb 02 #Javascript
Javascript核心读书有感之词法结构
Feb 01 #Javascript
Javascript核心读书有感之语言核心
Feb 01 #Javascript
jQuery功能函数详解
Feb 01 #Javascript
jQuery动画与特效详解
Feb 01 #Javascript
You might like
发一个php简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
IE8 原生JSON支持
2009/04/13 Javascript
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
javascript中this的四种用法
2015/05/11 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
Python中的is和id用法分析
2015/01/26 Python
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
为什么相对PHP黑python的更少
2020/06/21 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
计算机学生求职信范文
2014/01/30 职场文书
采购部经理岗位职责
2014/02/10 职场文书
学习保证书范文
2014/04/30 职场文书
党务公开方案
2014/05/06 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
Python合并多张图片成PDF
2021/06/09 Python