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使用height()获取高度需要注意的地方
Dec 13 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
详解如何在JS代码中消灭for循环
Dec 11 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
js实现表格数据搜索
Aug 09 Javascript
js实现幻灯片轮播图
Aug 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文件上传原理与实现方法详解
2019/12/20 PHP
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
js快速排序的实现代码
2013/12/08 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python图像处理之镜像实现方法
2015/05/30 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
Python中字符串List按照长度排序
2019/07/01 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
会计自我鉴定
2014/02/04 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
房产代理公证处委托书
2014/04/04 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
完整版商业计划书
2014/09/15 职场文书
教师个人事迹材料
2014/12/17 职场文书
2015中秋祝酒词
2015/08/12 职场文书
文艺委员竞选稿
2015/11/19 职场文书
五年级作文之成长
2019/09/16 职场文书