jquery如何设置按钮颜色
4个回答
展开全部
主题皮肤切换效果在很多网站和系统中会用到，用户可以根据此功能设置自己喜欢的主题颜色风格，增强了用户体验。
原理：实现该功能的原理就是通过点击定义的主题样式，改变页面当前引用的主题CSS文件，并且将当前的主题样式写入cookie中或者写入数据库中，以便下次该用户重新访问页面时，调用的就是上次设置好的主题样式。
步骤：
首先，准备三个样式表CSS文件，分别是三种颜色风格的主题皮肤，将其引入页面。
给每个<link>添加了title属性，另外禁用了第2个和第3个CSS文件，就是默认起作用的是第1个CSS文件。
HTML内容
CSS样式可以自己设置自己喜欢的布局，每个人用到的样式排版不同，这里就不展示css代码。
JQuery:
引入jquery库和jquery.cookie插件。jquery.cookie插件为jQuery提供了强大的cookie操作功能。
当用户点击切换选择主题时，要发生以下动作：获取选择的主题（id），查看引用的CSS文件，如果发现其title属性值正好与当前选中的主题id值相等，则应用该主题CSS文件，同时将其他引用的CSS文件禁用，并且将当前选中的主题写入cookie中，设置cookie过期时间，最后将当前选中的主题按钮（li）设置为当前选中状态。具体看下面的代码：
注意，本例中我将选中的样式保存在用户cookie中，cookie名称为”colorstyle“，值为当前选中的主题值，过去时间为30天，即：expires:30
接着是页面载入时，读取主题cookie值，如果主题cookie存在则调用cookie值对应的主题样式CSS文件，并且设置当前主题按钮状态为选中状态，反之，则调用默认样式。代码如下：
应用的cookie记录用户所选择设置的主题皮肤样式，当cookie到期或者用户清除了浏览器的cookie，或者用户换用其他浏览器浏览时，当前设置的主题就会失效。为了让用户永久保存选择的主题样式，必须将所选的主题与用户信息对应，写入数据库，下次该用户登录就可以直接读取以往选择的主题。
原理：实现该功能的原理就是通过点击定义的主题样式，改变页面当前引用的主题CSS文件，并且将当前的主题样式写入cookie中或者写入数据库中，以便下次该用户重新访问页面时，调用的就是上次设置好的主题样式。
步骤：
首先，准备三个样式表CSS文件，分别是三种颜色风格的主题皮肤，将其引入页面。
给每个<link>添加了title属性，另外禁用了第2个和第3个CSS文件，就是默认起作用的是第1个CSS文件。
HTML内容
CSS样式可以自己设置自己喜欢的布局，每个人用到的样式排版不同，这里就不展示css代码。
JQuery:
引入jquery库和jquery.cookie插件。jquery.cookie插件为jQuery提供了强大的cookie操作功能。
当用户点击切换选择主题时，要发生以下动作：获取选择的主题（id），查看引用的CSS文件，如果发现其title属性值正好与当前选中的主题id值相等，则应用该主题CSS文件，同时将其他引用的CSS文件禁用，并且将当前选中的主题写入cookie中，设置cookie过期时间，最后将当前选中的主题按钮（li）设置为当前选中状态。具体看下面的代码：
注意，本例中我将选中的样式保存在用户cookie中，cookie名称为”colorstyle“，值为当前选中的主题值，过去时间为30天，即：expires:30
接着是页面载入时，读取主题cookie值，如果主题cookie存在则调用cookie值对应的主题样式CSS文件，并且设置当前主题按钮状态为选中状态，反之，则调用默认样式。代码如下：
应用的cookie记录用户所选择设置的主题皮肤样式，当cookie到期或者用户清除了浏览器的cookie，或者用户换用其他浏览器浏览时，当前设置的主题就会失效。为了让用户永久保存选择的主题样式，必须将所选的主题与用户信息对应，写入数据库，下次该用户登录就可以直接读取以往选择的主题。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2016-11-15 · 百度知道合伙人官方认证企业
育知同创教育
1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
向TA提问
关注
![]()
展开全部
jquery设置按钮颜色可以通过动态操作css来实现。
1、指定html中的button元素
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js"></script>
</head>
<body>
<input type="button" value="按钮变化颜色" id="btn"/>
</body>
</html>
2、设置颜色的jquery脚本：
$("#btn").click(function(){
//each()分流出每个事件
$("#btn").each(function(index,elem){
//在给附上css值
$(elem).css("background",$(elem).data("color"));
})
})
// document.getElementById("a").style.background="red";
</script>
1、指定html中的button元素
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js"></script>
</head>
<body>
<input type="button" value="按钮变化颜色" id="btn"/>
</body>
</html>
2、设置颜色的jquery脚本：
$("#btn").click(function(){
//each()分流出每个事件
$("#btn").each(function(index,elem){
//在给附上css值
$(elem).css("background",$(elem).data("color"));
})
})
// document.getElementById("a").style.background="red";
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
如果你必须要使用这个Class，那么就建立几个颜色的Class，如果不需要，就直接改变颜色就好。
Class：
$('button_ident').addClass('bg-red');
$('button_ident').addClass('bg-blue');
如果其他不想显示已经改变过过的class，那就加多'.siblings().removeClass('className')'
直接变色：
$('button_ident').css('color','red');
$('button_ident').css('color','bule');
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
