如何在網站中使用dyanamic css

我想在我的網站中使用動態css，就像在網站頂部有4種不同的顏色圖標一樣，如果用戶點擊其中一個圖標整個配色方案和圖標顏色網站將會改變。如何在網站中使用dyanamic css

這是以前在yahoo.com可用（不確定當前是否可用）。

另外我不想使用任何第三方的CSS庫。或工具。

任何人都可以幫助建議最佳的方式來實現這一點。

來源

2013-12-13 Abhijeet Dange

你可以有一個腳本說，當你點擊其中一個圖標，添加一個類到身體，例如， '.theme-green'，然後相應的樣式。嘗試研究jQuery'addClass'，然後發佈一些代碼，如果你掙扎。 – davidpauljunior

你有沒有工作例子的鏈接？ –

在css中定義你的樣式。例如...

body.white{ 
    background-color:white; 
    color:#333; 
} 
body.black{ 
    background-color:black; 
    color: white; 
} 
body.blue{ 
    background-color:blue; 
    color:white; 
}

然後，添加圖片按鈕更改頁面上的皮膚/主題，並添加一個單擊處理程序，改變外觀。 here's an example

來源

2013-12-13 06:44:49 Leo

functon loadstyle(style){ 
    $('link#basestyle').attr('href', '/css/'+style+'.css'); 
}

例如HTML代碼：頭：

<link type=text/css' rel='stylesheet' id='basestyle' href=/css/style1.css'>

身體

：

<img class=".css_style_link" colosheet='style1' src='/img/style1.png' onclick="loadstyle('style1')"> 

<img class=".css_style_link" colosheet='style1' src='/img/style1.png' onclick="loadstyle('style2')"> 

<img class=".css_style_link" colosheet='style1' src='/img/style1.png' onclick="loadstyle('style2')">

來源

2013-12-13 07:46:50

類似問題=> http://stackoverflow.com/questions/3913359/how-to-load-css-using-jquery –

OK，所以最初，在正文中添加默認類。像：

<body class="default">

和上圖標的點擊，只需改變類的身體的，如：

<i class="theme-icons" data-class="default"></i> 
<i class="theme-icons" data-class="red"></i> 
<i class="theme-icons" data-class="blue"></i> 
<i class="theme-icons" data-class="green"></i> 

$(".theme-icons").click(function(){ 
    $("body").removeClass("default red blue green").addClass($(this).attr("data-class")); 
});

保持你的CSS嵌套這些主題類中。如：

.default .something{ 
    color:#0F0; 
} 

.red .something{ 
    color:red; 
} 

.blue .something{ 
    color:blue; 
} 

.green .something{ 
    color:green; 
}

祝你好運！

來源

2013-12-13 10:13:11

如何在網站中使用dyanamic css

回答

相關問題