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 相关文章推荐
IFrame跨域高度自适应实现代码
Aug 16 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
JS实现的几个常用算法
Nov 12 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
mpvue 单文件页面配置详解
Dec 02 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
深入学习JavaScript 高阶函数
Jun 11 Javascript
uni-app使用微信小程序云函数的步骤示例
May 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
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
js实现简单的倒计时
2021/01/28 Javascript
Python 的 with 语句详解
2014/06/13 Python
Python自动连接ssh的方法
2015/03/07 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
Python解惑之整数比较详解
2017/04/24 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
python实现大转盘抽奖效果
2019/01/22 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
社团文化节邀请函
2014/01/10 职场文书
战友聚会邀请函
2014/01/18 职场文书
家电业务员岗位职责
2014/03/10 职场文书
村容村貌整治方案
2014/05/21 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
销售经理工作检讨书
2015/02/19 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
法人代表资格证明书
2015/06/18 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL