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 ui 1.7更新小结
Aug 15 Javascript
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
初学node.js中实现删除用户路由
May 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
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
Javascript实现单张图片浏览
2014/12/18 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
python设置随机种子实例讲解
2019/09/12 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
python实现处理mysql结果输出方式
2020/04/09 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
学习Python需要哪些工具
2020/09/04 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
文明城市创建标语
2014/06/16 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
部队2014年终工作总结
2014/11/27 职场文书
安全教育片观后感
2015/06/17 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
python中的sys模块和os模块
2022/03/20 Python