jquery修改网页背景颜色通过css方法实现
我们在浏览一些网站,尤其是一些小说网站的时候,都会有修改页面背景颜色的地方,这个功能使用jquery很容易实现。
<!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颜色选择器ColorPicker实现代码
在CMS中通常都有给标题添加颜色的功能,但一般都比较简单,颜色支持也少,这里我要分享一个自己修改的颜色选择器.界面简洁,功能强大.在我们的日常项目中可以快速的部署. 复制代码 代码如下: $(".colorpicker").colorpicker({ target:'#title', success:function(o,color){ $("#color").val(color) }, reset:function(o){ $("#color"
-
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实现将获取的颜色值转换为十六进制形式的方法
本文实例讲述了jquery实现将获取的颜色值转换为十六进制形式的方法.分享给大家供大家参考.具体分析如下: 大家或许已经注意到了,在谷歌.火狐和IE8以上浏览器中,获取的颜色值是RGB形式,例如rgb(255,255,0),感觉非常不适应,或者在实际编码中不方便使用,这个时候就需要进行转换,下面就提供一段相关转换代码. 具体代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf
-
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();
-
jQuery 行背景颜色的交替显示(隔行变色)实现代码
一些css的定义,可以根据需要自己选择.//显示单双行显示不同背景色[方法一]: // $("#UL_id li:even").attr("className","redClass"); //显示单双行显示不同背景色[方法二]: $("#UL_id li:even").addClass("redClass"); <ul id="UL_id"> <li>单数<
-
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实现鼠标滑过Div层背景变颜色的方法
本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jQuery实现感应鼠标经过Div层变换图层背景颜色)</title> <style type="text/css"> .divbox{ height:300px; width:200px; background:#ffffff; border
-
jQuery获取样式中的背景颜色属性值/颜色值
天使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome.Firefox显示的格式不一样,IE中是以HEX格式显示#ffff00,而Chrome.Firefox中则是以GRB格式显示rgb(255,0,0),由于需要将颜色值存储到数据库中,所以想让颜色值的格式统一下(其实不统一也是可以存的).搜索了一下,从国外的一个网站上得到一段代码 复制代码 代码如下: $.fn.getHexBackgroundColor = function() { v
-
JQuery实现动态适时改变字体颜色的方法
本文实例讲述了JQuery实现动态适时改变字体颜色的方法.分享给大家供大家参考.具体分析如下: JQuery动态适时改变字体的颜色,Ajax的效果类似,在文本框输入文字,再选择色块,输入的文字就会变成色块标示的颜色值,很不错的效果吧.如果运行有错,请刷新一次页面即可. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1
随机推荐
- Mootools 1.2教程 输入过滤第二部分(字符串)
- 在asp.net中操作sql server数据库的一些小技巧
- jquery让返回的内容显示在特定div里(代码少而精悍)
- JS获取当前日期和时间的简单实例
- 在Android Studio中使用BaiduMap SDK实时获取当地位置信息
- 怎样调用动态获取的自定义对象的方法
- node.js中的buffer.copy方法使用说明
- php xml 入门学习资料
- 浅谈SSH框架中spring的原理
- IE下window.onresize 多次调用与死循环bug处理方法介绍
- Web开发必知Javascript技巧大全
- Linux VPS下简单解决CC攻击的方法
- LINUX 下软件包的安装与使用详解
- C#计算代码执行时间的方法
- Spring中@Transactional用法详细介绍
- 解析linq to xml操作XML的示例分析
- PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
- js中arguments对象的深入理解
- 微信小程序实现自动定位功能
- linux vi命令知识点用法总结