如何使用javascript / jquery在less css中更改主题颜色

我用下面的css来改变不同的主题颜色

@lightRed:   #fdd;
@lightGreen: #dfd;
@lightBlue:  #ddf;

@defaultThemeColor:@lightBlue;

#header{
.wrapper();
width:@defaultWidth;
height:80px;
margin-bottom:20px;
background:@defaultThemeColor;
}

#menu{
background:@defaultThemeColor;
}

而html如下:

当点击theme1时,应加载@lightRed主题,对于theme2 @lightBlue和对于theme3 @lightGreen

请让我知道我的javascript / jquery应该如何更改主题颜色点击

最佳答案
你可以尝试使用less.js函数,如:

less.refreshStyles()

要么

less.modifyVars()

你可以在这里阅读更多内容:Dynamically changing less variables

在.click事件上使用jQuery和modifyVars这一行可能有效:

$('.theme_option').click(function(event){
    event.preventDefault();
    less.modifyVars({
        '@defaultThemeColor': $(this).attr('data-theme')
    });
});

相关文章

1.第一步 设置响应头 header('Access-Control-Allow...
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的...
jquery.serializejson.min.js的妙用 关于这个jquery.seriali...
JS 将form表单数据快速转化为object对象(json对象) jaymou...
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http...