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 相关文章推荐
javascript xml为数据源的下拉框控件
Jul 07 Javascript
JS解析XML的实现代码
Nov 12 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
Vue中计算属性computed的示例解读
Jul 26 Javascript
小程序实现列表删除功能
Oct 30 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
原生JS实现分页
Apr 19 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往windows中添加用户
2006/12/06 PHP
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
php接口隔离原则实例分析
2019/11/11 PHP
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
和睦家庭事迹
2014/05/14 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
运动员代表致辞
2015/07/29 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书