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用图作提交按钮或超连接
Mar 26 Javascript
JQuery 动态扩展对象之另类视角
May 25 Javascript
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
JS二维数组的定义说明
Mar 03 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 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中ini_set和ini_get函数的用法小结
2014/02/18 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
菜鸟javascript基础整理1
2010/12/06 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
微信小程序实现文字跑马灯效果
2020/05/26 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
js实现日历
2020/11/07 Javascript
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
浅析Python中的多重继承
2015/04/28 Python
python中函数默认值使用注意点详解
2016/06/01 Python
python模块之paramiko实例代码
2018/01/31 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
手术室护士自我鉴定
2013/10/14 职场文书
医学院学生求职简历的自我评价
2013/10/24 职场文书
家长给孩子的表扬信
2014/01/17 职场文书
党在我心中演讲稿
2014/09/02 职场文书
公民授权委托书范本
2014/09/17 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
react 路由Link配置详解
2021/11/11 Javascript