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实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 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自动适应范围的分页代码
2008/08/05 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
js 小数取整的函数
2010/05/10 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
python 显示数组全部元素的方法
2018/04/19 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
Python调用C语言的实现
2019/07/26 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
巴西在线鞋店:Shoestock
2017/10/28 全球购物
快时尚眼镜品牌,全国连锁眼镜店:LOHO眼镜生活
2018/10/08 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
Python使用openpyxl复制整张sheet
2021/03/24 Python
医学专业职业生涯规划范文
2014/02/05 职场文书
高三学习决心书
2014/03/11 职场文书
大学班级计划书
2014/04/29 职场文书
2014年计生工作总结
2014/11/21 职场文书
2015年党建工作总结
2015/03/30 职场文书
疾病证明书
2015/06/19 职场文书
欢迎新生标语2015
2015/07/16 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
MySQL 服务和数据库管理
2021/11/11 MySQL
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技