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 相关文章推荐
实现51Map地图接口(示例代码)
Nov 22 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
js创建对象的方法汇总
Jan 07 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
vue中使用vue-pdf的方法详解
Sep 05 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 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多线程下载远程多个文件
2013/06/25 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
Python进行特征提取的示例代码
2020/10/15 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
Python用Jira库来操作Jira
2020/12/28 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
意大利比基尼品牌:MISS BIKINI
2019/11/02 全球购物
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
"引用"与多态的关系
2013/02/01 面试题
干部四风问题整改措施思想汇报
2014/10/13 职场文书
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android