jquery修改网页背景颜色通过css方法实现
更新时间：2014年06月06日 10:19:25 作者：
在浏览一些网站，尤其是一些小说网站的时候，都会有修改页面背景颜色的地方，这个是用jquery可以做到
我们在浏览一些网站，尤其是一些小说网站的时候，都会有修改页面背景颜色的地方，这个功能使用jquery很容易实现。
效果图：
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的属性值传入。
效果图：
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的属性值传入。
相关文章
jquery animate() 用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。2011-01-01
这篇文章主要介绍了jQuery实现购物车计算价格功能的方法,实例分析了jQuery针对html元素的操作技巧,非常具有实用价值,需要的朋友可以参考下2015-03-03
最近做需要用到弹出窗口，发现JBox不错，可以支持iframe,但是发现个问题，在iframe中添加一个按钮点击此按钮2009-02-02
这篇文章主要为大家详细介绍了基于jquery实现五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
jQuery 中 setTimeout/setInterval 不能像在原生态 javascript 中那样使用, 否则会报错.2013-04-04
jQuery源码分析-03构造jQuery对象-工具函数，需要的朋友可以参考下。2011-11-11
这篇文章主要介绍了jquery实现页面百叶窗走马灯式翻滚显示效果的方法,实例分析了jQuery操作百叶窗翻滚效果的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了使用jquery做的一个简单的屏幕锁定提示框,需要的朋友可以参考下2014-03-03
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
json作为一种轻量级的数据交换格式，在前后台数据交换中占据着非常重要的地位。Json的语法非常简单，采用的是键值对表示形式,本文给大家介绍SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的，对spring mvc ajax json相关知识感兴趣的朋友一起学习吧2015-12-12
详解使用jQuery.i18n.properties实现js国际化
这篇文章主要介绍了使用jQuery.i18n.properties实现js国际化，具有一定的参考价值，感兴趣的可以随小编看一看2018-05-05
最新评论