jquery修改网页背景颜色通过css方法实现


Posted in Javascript onJune 06, 2014

我们在浏览一些网站,尤其是一些小说网站的时候,都会有修改页面背景颜色的地方,这个功能使用jquery很容易实现。

效果图:
jquery修改网页背景颜色通过css方法实现 
show you code:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>jquery test</title> 
<script src="jquery-1.11.1.min.js"></script> 
</head> <body> 
<button style="background-color:white" value="white">white</button> 
<button style="background-color:red" value="red">red</button> 
<button style="background-color:green" value="green">green</button> 
<button style="background-color:yellow" value="yellow">yellow</button> 
<div class="show"> 
</div> 
<script> 
$("button").click( 
function() 
{ 
var color = this.value; 
$("body").css("background-color",color); 
} 
) 
</script> 
</html>

我们先根据元素名选择我们要操作的对象:button,然后使用click方法找到被点击的按钮,然后在触发的事件中获取该按钮的对应的颜色值,然后通过css()方法将该颜色值作为background-color的属性值传入。
Javascript 相关文章推荐
js函数般调用正则
Apr 08 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
jquery怎样实现ajax联动框(二)
Mar 08 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 #Javascript
JavaScript也谈内存优化
Jun 06 #Javascript
Javascript中的delete操作符详细介绍
Jun 06 #Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 #Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 #Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 #Javascript
按钮接受回车事件的三种实现方法
Jun 06 #Javascript
You might like
社区(php&amp;&amp;mysql)三
2006/10/09 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
PHP时间类完整代码实例
2021/02/26 PHP
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
Express的路由详解
2015/12/10 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
浅谈python中的数字类型与处理工具
2017/08/02 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
.NET程序员的数据库面试题
2012/10/10 面试题
建筑自我鉴定
2013/10/19 职场文书
办公室主任职责范文
2013/11/08 职场文书
优秀毕业生自我鉴定
2014/01/19 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书