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 相关文章推荐
JavaScript中this关键字使用方法详解
Mar 08 Javascript
jquery 全局AJAX事件使用代码
Nov 05 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 Javascript
详细分析Node.js 多进程
Jun 22 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
基于vue实现微博三方登录流程解析
Nov 04 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格式化工具Beautify PHP小小BUG
2008/04/24 PHP
php 学习资料零碎东西
2010/12/04 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
Fiddler如何抓取手机APP数据包
2016/01/22 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
基于python实现从尾到头打印链表
2019/11/02 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
Python多线程多进程实例对比解析
2020/03/12 Python
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
电视购物广告词
2014/03/19 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
表扬稿格式范文
2015/01/16 职场文书
关于倡议书的范文
2015/04/29 职场文书
公司回复函格式
2015/07/14 职场文书
Java Dubbo框架知识点梳理
2021/06/26 Java/Android