jquery修改网页背景颜色通过css方法实现

我们在浏览一些网站，尤其是一些小说网站的时候，都会有修改页面背景颜色的地方，这个功能使用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的属性值传入。

赞 (0)

相关推荐

  • jquery仿ps颜色拾取功能

    jquery仿ps颜色拾取功能

    1.效果展示 2.html代码:index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./jquery-1.12.4.min.js"></script> </head> <b

  • jQuery获取样式中的背景颜色属性值/颜色值

    天使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome.Firefox显示的格式不一样,IE中是以HEX格式显示#ffff00,而Chrome.Firefox中则是以GRB格式显示rgb(255,0,0),由于需要将颜色值存储到数据库中,所以想让颜色值的格式统一下(其实不统一也是可以存的).搜索了一下,从国外的一个网站上得到一段代码 复制代码 代码如下: $.fn.getHexBackgroundColor = function() { v

  • jquery实现将获取的颜色值转换为十六进制形式的方法

    本文实例讲述了jquery实现将获取的颜色值转换为十六进制形式的方法.分享给大家供大家参考.具体分析如下: 大家或许已经注意到了,在谷歌.火狐和IE8以上浏览器中,获取的颜色值是RGB形式,例如rgb(255,255,0),感觉非常不适应,或者在实际编码中不方便使用,这个时候就需要进行转换,下面就提供一段相关转换代码. 具体代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf

  • JQuery获取样式中的background-color颜色值的问题

    今天使用JQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome.Firefox显示的格式不一样,IE中是以HEX格式显示[#ffff00],而Chrome.Firefox中则是以GRB格式显示[rgb(255,255,0)],而我需要的是十六进制的颜色值,用于存储到数据库中,在网上找到下段代码能解决此问题: 复制代码 代码如下: $.fn.getHexBackgroundColor = function() { var rgb = $(this)

  • jQuery 行背景颜色的交替显示(隔行变色)实现代码

    一些css的定义,可以根据需要自己选择.//显示单双行显示不同背景色[方法一]: // $("#UL_id li:even").attr("className","redClass"); //显示单双行显示不同背景色[方法二]: $("#UL_id li:even").addClass("redClass"); <ul id="UL_id"> <li>单数<

  • JQuery实现动态适时改变字体颜色的方法

    本文实例讲述了JQuery实现动态适时改变字体颜色的方法.分享给大家供大家参考.具体分析如下: JQuery动态适时改变字体的颜色,Ajax的效果类似,在文本框输入文字,再选择色块,输入的文字就会变成色块标示的颜色值,很不错的效果吧.如果运行有错,请刷新一次页面即可. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

  • jQuery实现鼠标滑过Div层背景变颜色的方法

    本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jQuery实现感应鼠标经过Div层变换图层背景颜色)</title> <style type="text/css"> .divbox{   height:300px;   width:200px;   background:#ffffff;   border

  • Jquery颜色选择器ColorPicker实现代码

    Jquery颜色选择器ColorPicker实现代码

    在CMS中通常都有给标题添加颜色的功能,但一般都比较简单,颜色支持也少,这里我要分享一个自己修改的颜色选择器.界面简洁,功能强大.在我们的日常项目中可以快速的部署. 复制代码 代码如下: $(".colorpicker").colorpicker({ target:'#title', success:function(o,color){ $("#color").val(color) }, reset:function(o){ $("#color"

  • jquery实现效果比较好的table选中行颜色

    jquery实现效果比较好的table选中行颜色

    jquery table选中行颜色(效果更好) 复制代码 代码如下: <html> <head> <style type="text/css"> .table-tr-title{ height: 26px; font-size: 12px; text-align: center; } .table-tr-content{ height: 18px; background: #FFFFFF; text-align: center; font-size:

  • jQuery实现响应浏览器缩放大小并改变背景颜色

    /*Javascript代码片段*/ //定义一个方法:这个方法控制浏览器页面背景色的切换变化 function myfunction(){ $('body').toggleClass('bgcolor'); } //添加监控页面窗口变化的方法 $(window).resize(myfunction); //并且在页面加载时即调用 myfunction();

随机推荐