jQuery换色器
我已经看到许多网站，其中包含一个颜色开关，用户可以选择/选择任何颜色，整个页面将相应改变。下面是几个例子链接..。
http://csmthemes.com/themes/beta/static/
http://magna-themes.com/demos/html/flatapp/index.htm
http://envato.nestolab.com/Batekh/style-1/image-slider-version/index-one-page.html
http://ronseta.com/Roof/index_02.html我想要什么:我想要相同的配色方案，但问题是，我是一个自己创造它的专家，所以我想要基本的逻辑和一些代码开始，我有一个基本的知识，JavaScript和jQuery。如果有任何与此相关的免费插件，那么请共享链接，或者分享一些代码，通过这些代码我可以开始构建自己的插件。
回答 8
Stack Overflow用户
发布于 2015-03-20 15:48:00
跟随"http://magna-themes.com/demos/html/flatapp/index.htm“
0.按颜色创建多个css文件
style/colors/default.css
style/colors/green.css
style/colors/red.css
style/colors/pink.css1.创建一个带有id类颜色开关的css链接。
<link rel="stylesheet" type="text/css" href="style/colors/default.css" id="color-switcher">2.创建一个颜色选择器菜单。
<div id="demo-wrapper">
<h2>COLORS:</h2>
<ul>
<li class="green" data-path="style/colors/green.css"></li>
<li class="red" data-path="style/colors/red.css"></li>
<li class="pink" data-path="style/colors/pink.css"></li>
</ul>
<div class="clear"></div>
<p data-path="style/colors/default.css">Restore Default Scheme</p>
</div>3.使用javascript更改链接的路径
$('#demo-wrapper ul li').on('click', function(){
var path = $(this).data('path');
$('#color-switcher').attr('href', path);
});Stack Overflow用户
发布于 2015-03-13 16:57:19
基本理论是这样的！创建一个带有按钮、窗体、控件等的主题。元素的造型是常见的。如果我开发了一个主题，用户可以选择一个配色方案，我会添加一个特殊的类到每个元素，我希望用户修改。举个例子：
我有以下html元素。
<input type='button' value='submit' class='yourStyle specialClass'>我有以下的风格
.yourStyle{
** Style **
}我将使用下面的示例jQuery代码来更改配色方案。
$('document').ready(function(){
$('colorSchemeChoser').click(function(){
$('.specialClass').css('background-color','sampleColor');
})
})以上是启动您的开发的基本代码。
Stack Overflow用户
发布于 2015-03-16 10:05:14
尝试使用jQuery (首选)或Javascript动态更改样式表。每个样式表都有定义特定主题的样式。为了使您的代码看起来有点专业，请尝试使用data-* HTML 5属性来更改样式表。
以下是一个例子：
Html：
<button id="grayscale" data-theme="style.css">Original</button>
<button id="grayscale-2" data-theme="style2.css">Custom</button>和js：
$("button[data-theme]").click(function() {
$("head link[rel=stylesheet]").attr("href", $(this).data("theme"));
}希望这能有所帮助。如果你需要进一步澄清，请告诉我。谢谢!
https://stackoverflow.com/questions/29037627
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号