我想改變,由於用戶的選擇在選擇列表中的CSS文件:如何在主題之間切換?
<select>
<option>light</option>
<option>dark</option>
</select>
所以當選擇光css文件將light.css當黑暗如此dark.css 並保存此coice在餅乾管他呢 。 謝謝!
我想改變,由於用戶的選擇在選擇列表中的CSS文件:如何在主題之間切換?
<select>
<option>light</option>
<option>dark</option>
</select>
所以當選擇光css文件將light.css當黑暗如此dark.css 並保存此coice在餅乾管他呢 。 謝謝!
您可以在樣式表設置禁用屬性,這將禁用樣式表
說你有兩個樣式
<link rel="stylesheet" type="text/css" href="light-theme.css" id="light-theme"/>
<link rel="stylesheet" type="text/css" href="dark-theme.css" id="dark-theme"/>
您可以輕鬆地啓用只是其中之一
function setTheme(theme) {
var themes = ["light-theme", "dark-theme"];
for (var i=0; i < themes.length; i++) {
var styleSheet = document.getElementById(themes[i]);
if (themes[i] == theme) {
styleSheet.removeAttribute("disabled");
} else {
styleSheet.setAttribute("disabled", "disabled");
}
}
}
見How to change and maintain multiple color themes at runtime with css?
你還是需要將它保存到cookie中,您可以提出另一個問題。
實現這一目標的最簡單方法是勾上onchange
事件select
元素,並用它來設置你的<body>
元素上一個特定的主題級,造成其他款式以供您的應用樣式。或者,您可以銷燬樣式表並重新加載一個樣式表,但這是一個更高級的主題。
既然你標記這個問題php這也是值得一提的是,通常你只是做回發到服務器進行此,也改變一些會話/ Cookie數據,並基於該生成你的模板<head>
另一<link>
標籤。
提到的兩個選項都是解決問題的有效方法。
[你有什麼嘗試?](http://whathaveyoutried.com/) –
使用JavaScript來交替兩個外部樣式表。如果您遇到困難,請回復一個更具體的問題。 – meagar
http://stackoverflow.com/questions/9946593/how-to-change-and-maintain-multiple-color-themes-at-runtime-with-css/9946764#9946764 –