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 学习笔记 错误处理
Jul 30 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 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函数指定默认值方法的小例子
2013/12/04 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
php微信公众号开发模式详解
2016/11/28 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
2015/09/14 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
vue实现浏览器全屏展示功能
2019/11/27 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
python中urllib模块用法实例详解
2014/11/19 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
Python Flask框架扩展操作示例
2019/05/03 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
天猫精选:上天猫,就够了
2016/09/21 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
商场消防演习方案
2014/02/12 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
机关节能减排实施方案
2014/03/17 职场文书
网站客服岗位职责
2014/04/05 职场文书
班委竞选演讲稿
2014/04/28 职场文书
春节联欢会策划方案
2014/05/16 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
德劲DE1108畅想
2021/04/22 无线电
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS