7

以下のless cssを使用して、異なるテーマの色を変更しています

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

@defaultThemeColor:@lightBlue;

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

#menu{
background:@defaultThemeColor;
}

また、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>

theme1 をクリックすると、@lightRed テーマがロードされ、theme2 には @lightBlue、theme3 には @lightGreen がロードされます

クリック時にテーマの色を変更するには、javascript/jquery の方法を教えてください

4

7 に答える 7

5

次のようなless.js関数を使用してみてください。

less.refreshStyles()

また

less.modifyVars()

ここでこれについてもっと読むことができます：動的に少ない変数を変更する

イベントでjQueryとmodifyVarsを使用すると、この行に沿った何かが機能する可能性があります。.click

$('.theme_option').click(function(event){
    event.preventDefault();
    less.modifyVars({
        '@defaultThemeColor': $(this).attr('data-theme')
    });
});
于 2013-04-15T18:08:03.863 に答える
1

背景色 onclick li を変更するだけの場合は、各 li にクラスを割り当て、以下のようにすべてのクラスで jQuery クリック イベントをトリガーします。

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:

$('.red').click(function(){
   $(this).css('background-color',"red")
 });
$('.green').click(function(){
   $(this).css('background-color',"red")
 });
$('.blue').click(function(){
   $(this).css('background-color',"blue")
 });
于 2013-04-15T07:05:27.170 に答える
1

lesscss は、コンパイルする必要がある Css であることに注意してください。つまり、lesscss の動作を直接変更することはできませんが、css をコンパイルすると変更できます。ブラウザはlesscssを理解していません。覚えておく必要があります。

したがって、これを行う最善の方法は、変更したいオブジェクトに対して 2 つのクラスを使用することだと思います。このように、jQuery を使用してテーマ クラスを変更することで、あるものから別のものに切り替えることができます。次のようなものを想像してください。

lesscss:

.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;
}

そしてあなたの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"/>

それが役に立てば幸い。

于 2013-04-15T07:28:10.013 に答える
0

色ごとにクラスを作成 クラスをローカルストレージに格納 javascript関数で変更

 <!DOCTYPE html>
 <html lang="en" class="theme_name_1">
 <head>
 <style>
.theme_name_1{
   color: #FFFF;
 }
.theme_name_2{
 color: #000;
}
</style>
 </head>
 <body>
 <button id="switch" onclick="changeTheme()">Switch</button>
 <script>
/* Script Save theme local storage to first load */
    if (localStorage.getItem('theme') === 'theme_name_2') {
       setTheme('theme_name_1');
    } else {
      setTheme('theme_name_2');
    }

    function setTheme(theme_name) {
        localStorage.setItem('theme', theme_name);
        document.documentElement.className = theme_name;
    }

/*Change theme button click */
    function changeTheme() {
        if (localStorage.getItem('theme') === 'theme_name_2') {
            setTheme('theme_name_1');
        } else {
            setTheme('theme_name_2');
        }
    }
 </script>
 </body>
 </html>
于 2020-10-06T05:55:58.817 に答える