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 相关文章推荐
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
js实现网页版贪吃蛇游戏
Feb 22 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
星际流派综述
2020/03/04 星际争霸
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
Yii使用技巧大汇总
2015/12/29 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
Python IDLE清空窗口的实例
2018/06/25 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
制药工程专业应届生求职信
2013/09/24 职场文书
教师找工作推荐信
2013/11/23 职场文书
家长会演讲稿范文
2014/01/10 职场文书
社会学专业学生职业规划书
2014/02/07 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
青年志愿者活动感想
2015/08/07 职场文书
担保书格式范文
2015/09/22 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python