Question

我正在制作一个有两个主题的网站，绿色和蓝色。默认颜色为绿色，然后您可以单击按钮以更改为蓝色，因此所有文本都将更改为蓝色。

我在这里搜索了一下stackoverflow，并认为最佳解决方案是发布此代码的人：

function updateStyleSheet(filename) {
    newstylesheet = "Content/css/" + filename + ".css";
    if ($("#dynamic_css").length == 0) {
        $("head").append("<link>")
        css = $("head").children(":last");
        css.attr({
            id: "dynamic_css",
            rel: "stylesheet",
            type: "text/css",
            href: newstylesheet
        });
    } else {
        $("#dynamic_css").attr("href", newstylesheet);
    }
}

如果我理解正确，这应该用我的网站替换我网站的当前样式表，得到我想要的相同结果。我有2个样式表;一个名为stylegreen.css，另一个名为styleblue.css。在上面的代码中我应该更改以使其工作，并在html中添加我应该添加脚本吗？最后一件事是做出改变的按钮 - 应该怎么做？

Answer 1

这是一个在调用时向标题添加HTML链接标记的函数。为了使它成功，你需要：

1 - 它需要jQuery。所以你必须导入jquery库

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

2 - 更改css文件的路径

newstylesheet = "your/path/" + filename + ".css";

3 - 调用函数，给出要附加的css文件的名称

updateStyleSheet("styleblue"); // attach styleblue.css to your page
updateStyleSheet("stylegreen"); // attach styleblue.css to your page

完整示例：

<html>
<head>
   <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
    <select id="styleSelect">
        <option value="styleblue">Blue</option>
        <option value="stylegreen">Green</option>
    </select>

    <script>
      function updateStyleSheet(filename) {
        newstylesheet = "path/to/css/" + filename + ".css";
        if ($("#dynamic_css").length == 0) {
          $("head").append("<link>")
          css = $("head").children(":last");
          css.attr({
            id: "dynamic_css",
            rel: "stylesheet",
            type: "text/css",
            href: newstylesheet
          });
        } else {
          $("#dynamic_css").attr("href", newstylesheet);
        }
      }

      // It is a plus. It calls the updateStyleSheet function
      // giving the select value as an argument when you change the select element
      $("#styleSelect").change(function() {
           updateStyleSheet($(this).val());
      });
    </script>
</body>

Answer 2

由于您只有2个样式表，因此可以简化您的情况。

假设它们是可互换的，您只需通过硬编码将ID添加到现有的默认链接标记即可。 如果硬代码不切实际，还有其他方法可以简单地定位正确的现有链接标记

<link id="site_theme" href="path/to/css/styles_green.css" data-color="green">

在JS中：

/* bind a click handler to some button */
$('#someButtonId').click(function () {
    /* define link tag as jQ object */
    var $link = $('#site_theme'),
        /* current color stored in data attribute */
        currColor = $link.data('color'),
        /* set new color*/
        newColor = currColor === 'green' ? 'blue' : 'green';
    /* modify the href for new theme color */
    $link.attr('href', function (_, currHref) {
        return currHref.replace(currColor, newColor);
        /* store the newColor */
    }).data('color', newColor);
});

以上假设颜色位于css文件的文件名中。

随后点击该按钮将在主题之间来回切换

我不明白这个jquery代码

2 个答案: