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 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
JS将网址url转化为JSON格式的方法
Jul 02 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
vue路由前进后退动画效果的实现代码
Dec 10 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 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 ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
javascript定义函数的方法
2010/12/06 Javascript
JS 控件事件小结
2012/10/31 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
python文件操作整理汇总
2014/10/21 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
艺术专业大学生自我评价
2013/09/22 职场文书
贷款委托书范本
2014/04/08 职场文书
蓝颜请假条
2014/04/11 职场文书
小学作文评语大全
2014/04/21 职场文书
公司周年庆典标语
2014/10/07 职场文书
车队安全员岗位职责
2015/02/15 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL