Jak zmienić kolor motywu w krótszym css za pomocą JavaScript/jQuery

Question

używam poniżej mniej css zmienić inny kolor motyw

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

@defaultThemeColor:@lightBlue; 

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

#menu{ 
background:@defaultThemeColor; 
} 

i HTML jest w następujący sposób:

<div id="swatch"> 
<ul> 
<li><a href="">theme1</a></li> 
<li><a href="">theme2</a></li> 
<li><a href="">theme3</a></li> 
</ul> 
</div> 

gdy theme1 jest kliknięty motyw @lightRed powinien zostać załadowany, dla motywu2 @lightBlue i dla motywu3 @lightGreen

Proszę dać mi znać, jak powinien być mój javascript/jquery, aby zmienić kolor motywu na kliknij

Answer 1

pomocą zdarzenia na kliknięcie, aby zmienić kolor tła

to jest przykład na zmianę koloru tła przy użyciu na change..pls to sprawdzić [Przykład] [http://jsfiddle.net/6YVes/ ]

Answer 2

Jeśli chcesz tylko zmienić kolor tła onclick Li, przypisać każdemu Li klasę i wywołać zdarzenie click jQuery w każdej klasie jak poniżej:

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") 
}); 

Answer 3

Należy pamiętać, że lesscss to Css, który musi być skompilowany. Oznacza to, że nie możesz bezpośrednio modyfikować zachowania twoich lesscss, ale możesz skompilować css. Przeglądarki nie rozumieją mniejszej liczby rzeczy, o których musisz pamiętać.

Uważam, że najlepszym sposobem na to jest użycie dwóch klas obiektu, który chcesz zmodyfikować, jednego z kształtem i drugiego z motywem. W ten sposób można przełączyć się z jednego na inny, modyfikując za pomocą jQuery klasę kompozycji. Wyobraź sobie coś takiego:

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

i Twojego 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"/> 

nadzieję, że to pomaga.

Answer 4

Jak prem zasugerował, że najlepiej byłoby zastosować klasę do każdego tematu

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

ten sposób, aby zmienić każdy temat, po prostu trzeba zmienić klasę obiekt kontenera. Powiedzmy, że obiekt kontenera jest treścią dokumentu, a następnie klasa ciała zostanie zmieniona na żądaną kompozycję.

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):

jQuery('a.theme_option').click(function(e){ 
    e.preventDefault(); 
    var theme_class = jQuery(this).attr('data-theme'); 
    jQuery(body).attr('class', theme_class); 
} 

Answer 5

zmienne w CSS jest projekt teraz!

http://www.w3.org/TR/css-variables/

Answer 6

można spróbować użyć funkcji less.js jak:

less.refreshStyles() 

lub

less.modifyVars() 

można odczytać może trochę więcej na ten temat tutaj: Dynamically changing less variables

Coś wzdłuż tej linii z jQuery i modifyVars na razie .click może działać:

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