Question

我正在尝试在两个不同的样式表之间切换以显示不同的主题样式。我有两种不同的样式表，我想在它们之间切换。

样式表：

<link rel="stylesheet" type="text/css" title="light" href="css/default.css" />
<link rel="alternative stylesheet" type="text/css" title="dark" href="css/default_style2.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

我为每个样式表提供了明暗标题标签，以便在点击切换以更改样式表时参考。

我的jQuery代码：

<div id="toggleTheme">

        <script>

        $(document).ready(function () {
            $("#light, #dark").click(function () {
                changeStyle(this.getAttribute("rel"));
                return false;
            });

            function changeStyle (light, dark) {

                var light = $(this).attr('title') == "light";
                var dark = $(this).attr('title') == "dark";

                if ()
            }

        });

        </script>

        <ul id="themeToggle">

        <a href="#" id="light"><li>light theme</li></a>
        <a href="#" id="dark"><li>dark theme</li></a>

        </ul>

        </div>

不确定从这里开始......

一些帮助会很棒。提前致谢。

Answer 1

只需detach您不想申请的那个。浏览器将删除它定义的所有样式。要激活它，请将其连接并分离另一个。

以下是使用style元素的非常快速而肮脏的示例，但同样的原则适用于link元素：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Changing styles</title>
  <style id="light">
    body {
      color: black;
      background-color: white;
    }
  </style>
  <style id="dark">
    body {
      color: white;
      background-color: black;
    }
  </style>
</head>
<body>
  <label><input type="radio" name="chooseStyle" value="light">Light</label>
  <label><input type="radio" name="chooseStyle" value="dark" checked>Dark</label>
  <script>
    (function() {
      var styles = {
        light: $("#light").detach(),
        dark:  $("#dark")
      };

      $("input[name=chooseStyle]").click(function() {
        var other = this.value === "light" ? "dark" : "light";
        styles[this.value].appendTo('head');
        styles[other].detach();
      });
    })();
  </script>
</body>
</html>

Live Copy

切换两种不同的样式表

1 个答案: