如何使用 javascript/jquery 在 less css 中更改主题颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16008847/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the theme color in less css using javascript/jquery
提问by user1165077
am using the below less css to change different theme color
我正在使用下面的 less css 来更改不同的主题颜色
@lightRed: #fdd;
@lightGreen: #dfd;
@lightBlue: #ddf;
@defaultThemeColor:@lightBlue;
#header{
.wrapper();
width:@defaultWidth;
height:80px;
margin-bottom:20px;
background:@defaultThemeColor;
}
#menu{
background:@defaultThemeColor;
}
And html is as follows:
而html如下：
<div id="swatch">
<ul>
<li><a href="">theme1</a></li>
<li><a href="">theme2</a></li>
<li><a href="">theme3</a></li>
</ul>
</div>
when theme1 is clicked @lightRed theme should be loaded, for theme2 @lightBlue and for theme3 @lightGreen
当主题 1 被点击时，@lightRed 主题应该被加载，对于主题 2 @lightBlue 和对于主题 3 @lightGreen
Please let me know how should be my javascript/ jquery to change the theme color on click
请让我知道我的 javascript/jquery 应该如何在单击时更改主题颜色
回答by Martin Turjak
you could try using less.js functions like:
您可以尝试使用 less.js 函数，例如：
less.refreshStyles()
or
或者
less.modifyVars()
you can maybe read some more on this here: Dynamically changing less variables
您可以在此处阅读更多相关内容：动态更改较少的变量
Something along this lines with jQueryand modifyVarson a .clickevent might work:
事件上的jQuery和modifyVars沿着这条线.click可能会起作用：
$('.theme_option').click(function(event){
event.preventDefault();
less.modifyVars({
'@defaultThemeColor': $(this).attr('data-theme')
});
});
回答by Max25
using the on-click event to change the background color
使用点击事件改变背景颜色
this is example for changing the background color using on change..pls check it out [Example][http://jsfiddle.net/6YVes/]
这是使用 on change 更改背景颜色的示例。请查看 [示例][http://jsfiddle.net/6YVes/]
回答by prem
If you just want to change the background color onclick li's, assign each li a class and trigger a jQuery click event on every class like below:
如果您只想更改 onclick li's 的背景颜色，请为每个 li 分配一个类并在每个类上触发一个 jQuery 单击事件，如下所示：
HTML:
HTML：
<div id="swatch">
<ul>
<li><a class="red" href="">theme1</a></li>
<li><a class="green" href="">theme2</a></li>
<li><a class="blue" href="">theme3</a></li>
</ul>
</div>
JS:
JS：
$('.red').click(function(){
$(this).css('background-color',"red")
});
$('.green').click(function(){
$(this).css('background-color',"red")
});
$('.blue').click(function(){
$(this).css('background-color',"blue")
});
回答by droidpl
Note that lesscss is a Css that must be compilerd. That means you can not modify directly the behaviour of your lesscss but you can with css compiled. Browsers do no understand lesscss you have to keep it in mind.
请注意，lesscss 是必须编译的 Css。这意味着你不能直接修改你的lesscss 的行为，但你可以使用编译的 css。浏览器不理解 lesscss 你必须记住它。
So, I think the best way to do this is using two classes on the object you want to modify, one with the shape and another with the theme. In this way you can switch from one to anothr by modifying using jQuery the theme class. Imagine something like:
所以，我认为最好的方法是在要修改的对象上使用两个类，一个是形状，另一个是主题。通过这种方式，您可以通过使用 jQuery 修改主题类来从一个切换到另一个。想象一下：
lesscss:
少CSS：
.theme-1 {
//Here goes your theme colors
}
.theme-2 {
//Here goes more theme colors and rules
}
#header {
.wrapper();
width:@defaultWidth;
height:80px;
margin-bottom:20px;
background:@defaultThemeColor;
}
And your html:
还有你的 html：
<div id="header" class="theme-1"/>
<button onclick="$('.theme-1').removeClass('theme-1').addClass('theme-2');" name="Change to theme 2"/>
<button onclick="$('.theme-2').removeClass('theme-2').addClass('theme-1');" name="Change to theme 1"/>
Hope it helps.
希望能帮助到你。
回答by strakez
As prem suggested, it would be best to apply a class to each theme
正如 prem 建议的那样，最好为每个主题应用一个类
CSS:
CSS：
/* -- [ light blue theme (default) ] ---------- */
#header, #header.lightblue {
background: #ddf;
height: 80px;
margin-bottom: 20px;
width: 300px;
}
#menu, #menu.lightblue {
background: #ddf;
}
/* -- [ light red theme ] ---------- */
#header.lightred {
background: #fdd;
height: 95px;
margin-bottom: 10px;
width: 400px;
}
#menu.lightred {
background: #fdd;
}
/* -- [ light green theme ] ---------- */
#header.lightgreen {
background: #dfd;
height: 72px;
margin-bottom: 15px;
width: 290px;
}
#menu.lightgreen {
background: #dfd;
}
This way, to change each theme, you just have to change the class of the container object. Say the container object is the document body, then the body's class be changed to the desired theme.
这样，要更改每个主题，您只需更改容器对象的类。假设容器对象是文档正文，那么正文的类将更改为所需的主题。
HTML:
HTML：
<div id="swatch">
<ul>
<li><a class="theme_option" data-theme="red" href="#">theme1</a></li>
<li><a class="theme_option" data-theme="green" href="#">theme2</a></li>
<li><a class="theme_option" data-theme="blue" href="#">theme3</a></li>
</ul>
</div>
JavaScript (jQuery):
JavaScript (jQuery):
jQuery('a.theme_option').click(function(e){
e.preventDefault();
var theme_class = jQuery(this).attr('data-theme');
jQuery(body).attr('class', theme_class);
}
