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 相关文章推荐
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
javascript实现表单验证
Jan 29 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
jQuery操作css样式
May 15 jQuery
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 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 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
PHP中的session安全吗?
2016/01/22 PHP
php微信开发之图片回复功能
2018/06/14 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
JS 实现导航栏悬停效果
2013/09/23 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
python 解析html之BeautifulSoup
2009/07/07 Python
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
python实现折半查找和归并排序算法
2017/04/14 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
Python 加密与解密小结
2018/12/06 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
python线程池如何使用
2020/05/28 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
党员个人思想汇报
2013/12/28 职场文书
人事代理委托书
2014/09/27 职场文书
八年级英语教学计划
2015/01/23 职场文书
颐和园导游词400字
2015/01/30 职场文书
长城的导游词
2015/01/30 职场文书
婚礼答谢词范文
2015/09/29 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
只用Python就可以制作的简单词云
2021/06/07 Python