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 相关文章推荐
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
javascript实现将文件保存到本地方法汇总
Jul 26 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 Javascript
浅析jQuery 3.0中的Data
Jun 14 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
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中集成PayPal标准支付的实现方法分享
2012/02/06 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
试用php中oci8扩展
2015/06/18 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
javascript实现计算器功能
2020/03/30 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
python线程池的实现实例
2013/11/18 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
python Django框架实现自定义表单提交
2016/03/25 Python
python字典的常用操作方法小结
2016/05/16 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
Python生成数字图片代码分享
2017/10/31 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
智乐游戏测试笔试题
2014/05/21 面试题
汽车销售求职自荐信
2013/10/01 职场文书
应届大学生求职的自我评价
2013/11/17 职场文书
节能环保口号
2014/06/12 职场文书
授权收款委托书范本
2014/10/10 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android