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、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
JavaScript中的宏任务和微任务详情
Nov 27 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之第六天
2006/10/09 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
php页面缓存方法小结
2015/01/10 PHP
使用URL传输SESSION信息
2015/07/14 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
用JS控制回车事件的代码
2011/02/20 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
Js面试算法详解
2018/04/08 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
js 函数性能比较方法
2020/08/24 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
python获取url的返回信息方法
2018/12/17 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
艺术应用与设计个人的自我评价
2013/11/23 职场文书
小班秋游活动方案
2014/02/22 职场文书
《学棋》教后反思
2014/04/14 职场文书
小学数学教研活动总结
2014/07/01 职场文书
地震捐款简报
2015/07/21 职场文书
员工旷工检讨书
2015/08/15 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL