Question

由于用户在选择列表中的选择，我想更改CSS文件：

<select>
<option>light</option>
<option>dark</option>
</select>

因此，当选择光时，css文件将为light.css，而当暗光为暗.css 并将这个骰子保存在饼干或其他任何东西中。谢谢！

Answer 1

您可以在样式表上设置禁用的属性，这将禁用该样式表

假设您有两个样式表

<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中，你可以提出另一个问题。

Answer 2

实现此目的的最简单方法是挂钩onchange元素的select事件，并使用它在<body>元素上设置特定于主题的类，从而导致其他要从样式表中应用的样式。或者，您可以销毁样式表并动态重新加载，但这是一个更高级的主题。

由于您标记了此问题php，因此通常您只需对服务器进行回发，在此处更改某些会话/ Cookie数据，并根据该数据生成另一个<link>标记在模板的<head>中。

提到的两个选项都是解决问题的有效方法。

如何在主题之间切换？

2 个答案: