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 相关文章推荐
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
常用Javascript函数与原型功能收藏(必看篇)
Oct 09 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
layui select获取自定义属性方法
Aug 15 Javascript
详解VSCode配置启动Vue项目
May 14 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中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
JavaScript 创建对象
2009/07/17 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
在python win系统下 打开TXT文件的实例
2018/04/29 Python
如何学习Python time模块
2020/06/03 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
澳洲健康食品网上商店:Aussie Health Products
2018/06/15 全球购物
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
科级干部考察材料
2014/02/15 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
建国大业电影观后感
2015/06/01 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书