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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
微信小程序全局变量功能与用法详解
Jan 22 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
javascript中可能用得到的全部的排序算法
Mar 05 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 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
B2K与车机的中波PK
2021/03/02 无线电
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
php实现学生管理系统
2020/03/21 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
PHP 实现重载
2021/03/09 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
python检测远程服务器tcp端口的方法
2015/03/14 Python
python中星号变量的几种特殊用法
2016/09/07 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
html如何对span设置宽度
2019/10/30 HTML / CSS
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
酒店人事专员岗位职责
2013/12/19 职场文书
大学军训感言
2014/01/10 职场文书
西北政法大学自主招生自荐信
2014/01/29 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
经典祝酒词大全
2015/08/12 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL