在两个样式表之间切换答案

【问题标题】：Toggle between two stylesheets在两个样式表之间切换
【发布时间】：2018-05-26 02:28:04
【问题描述】：

我正在尝试添加一种在 2 个样式表之间切换的非常简单的方法。

我可以让样式表在点击时触发，但无法将其切换回原来的状态：

<button id="css_toggle" title="I'm a tooltip!">Text</button>
<div class="sq"></div>

$('#css_toggle').click(function () {
  $('link[href="http://localhost:8888/rip-access/wp-content/themes/RIP/assets/css/style.css"]').attr('href', 'http://localhost:8888/rip-access/wp-content/themes/RIP/assets/css/style1.css').toggle();
});

这是一个非常简单的示例，因此我可以在继续之前了解如何操作。有什么想法可以让它切换回第一个样式表吗？

【问题讨论】：

您无法将其恢复为原始状态，因为您的 jQuery 选择器找不到任何元素（$('link[href="http://localhost:8888/rip-access/wp-content/themes/RIP/assets/css/style.css"]')。尝试使用 ID 并在点击时更改 href。
@VTodorov 你能举个简单的例子吗？
更好、更可靠的解决方案是使用单个样式表并通过使它们依赖于body 上的类来切换类。然后，您可以在需要时切换该类。

标签： jquery css

【解决方案1】：

不像以前的一些答案那么优雅，但希望像我这样的相对初学者容易理解：

总之，这段代码生成了一个在两个样式表（light.css 和 dark.css）之间切换的按钮，并且还更新了按钮上的文本。

(1)在您的 HTML 中，给样式表链接一个 id (style)，并设置一个空 div (button-container)，其中将包含按钮：

<head>
<link id="style" rel="stylesheet" href="light.css" />
</head>

<body> 
<div class="button-container"></div>
</body>

(2) 在您的 脚本块或 script.js 文件中，将样式表链接的当前 href 值存储在变量 (theme) 中：

let theme = $("head link#style").attr("href");

(3) 在按钮容器 div 中插入一个按钮。该按钮有一个 onclick 处理程序，它调用一个名为 toggleTheme 的函数：

$(".button-container").html('<button id="theme" onclick="toggleTheme()">dark mode</button>');

(4)toggleTheme 函数检查变量主题的当前值，为其分配另一个样式表的值，并更新按钮文本：

function toggleTheme() {
    if (theme == "light.css") {
        theme = "dark.css";
        $("head link#style").attr("href", theme);
        $(".theme").html(
            '<button id="theme" onclick="toggleTheme()">light mode</button>'
        );
    } else {
        theme = "light.css";
        $("head link#style").attr("href", theme);
        $(".theme").html(
            ' <button id="theme" onclick="toggleTheme()">dark mode</button>'
        );
    }
}

【讨论】：

【解决方案2】：

如果由于某种原因无法应用 Rory 的解决方案，这是一个可供考虑的替代解决方案。理想的做法是简单地切换 body 类并将此类用作 基本选择器 - 我最近将此方法应用于应用程序在深色和浅色主题之间切换，然后将其存储到 @987654322 @ 以便“记住”更改，例如：

<style>
    .nocturnal-theme p {
       background: black;
       color: white;
    }

    .diurnal-theme p {
       background: white;
       color: black;
    }
</style>

<script>
/* Toggle Theme */
jQuery('.toggle-theme').on('click', function(){
    if(jQuery(this).hasClass('toggle-diurnal')) {
        jQuery('body').removeClass('diurnal-theme').addClass('nocturnal-theme');
        localStorage.setItem('theme','nocturnal-theme');
    } else if(jQuery(this).hasClass('toggle-nocturnal')) {
        jQuery('body').removeClass('nocturnal-theme').addClass('diurnal-theme');
        localStorage.setItem('theme','diurnal-theme');
    }
    var themeSet = localStorage.getItem('theme');
});
</script>

总结

以下解决方案存储 relative 文件路径（典型的标准的 Wordpress 安装）到变量（您可能并不总是有唯一标识符（id 属性值）可供使用，并且由于编辑核心文件以包括一个，因此不被认为是好的做法（原因不会被触及这里）最好将这些文件路径存储在变量中）；
在'#css_toggle' 的.click() 上，.each() 方法用于循环遍历样式表的所有实例（其中最可能是少数），它还允许我们重新定义 $(this) 这将被证明对前进很有帮助；
通过循环的每次迭代，link 当前在范围内将其href 属性存储在变量中；
然后将此属性的存储值与 相对文件路径我们之前存储在变量中
如果发现它们包含这些存储的值，href 相关link 元素的属性会相应更新

代码片段演示：

var defaultSS = '/wp-content/themes/RIP/assets/css/style.css',
    altSS = '/wp-content/themes/RIP/assets/css/style1.css',
    hrefAttr;

$('#css_toggle').click(function () {

  $('link').each(function(){
    hrefAttr = $(this).attr('href');
    if (hrefAttr.indexOf(defaultSS) >= 0) {
      $(this).attr('href', altSS);
      
      console.log('Was:',hrefAttr);
      console.log('Now:',$(this).attr('href'));
      
    } else if (hrefAttr.indexOf(altSS) >= 0) {
      $(this).attr('href', defaultSS);
      
      console.log('Was:',hrefAttr);
      console.log('Now:',$(this).attr('href'));
      
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://localhost:8888/rip-access/wp-content/themes/RIP/assets/css/style.css" type="text/css" media="all">

<button id="css_toggle" title="I'm a tooltip!">Text</button>

【讨论】：

【解决方案3】：

而不是长 href 使用 link[href*="style.css"] 来查找 style.css

var click = false;
var path = '/rip-access/wp-content/themes/RIP/assets/css/';

$('#css_toggle').on('click', function() {
  if (!click) {
    $('link[href*="style.css"]').attr('href', path + 'style1.css');
    click = true;
    console.log('changed to style1.css');
  } else {
    $('link[href*="style1.css"]').attr('href', path + 'style.css');
    click = false;
    console.log('changed to style.css');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="css_toggle" title="I'm a tooltip!">Toggle</button>
<link href="/rip-access/wp-content/themes/RIP/assets/css/style.css" rel="stylesheet" />

您也可以使用ID 而不是按文件名选择。

$('#css') // jquery selector

<link id="css" href="..." rel="stylesheet" /> // html

【讨论】：

我能看到的唯一问题是字符串中可能有多个link 元素与style.css 的实例（因为它是一个wordpress 网站，来自不同的多个样式表插件将被提供）。
@UncaughtTypeError 同意，我建议改用ID。

【解决方案4】：

您可以通过 jquery 使用 detach

<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>

Demo link

【讨论】：

【解决方案5】：

更好、更可靠的解决方案是使用单个样式表并通过使规则依赖于body 上的类来替代样式。然后，您可以在需要时切换该类，如下所示：

$('#css_toggle').click(function() {
  $('body').toggleClass('default highlight');
});

body.default .sq {
  border: 1px solid #C00;
}   

body.highlight .sq {
  background-color: #CC0;
  border: 2px dotted #C00;
}

.sq {
  margin: 10px 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="default">
  <button id="css_toggle" title="I'm a tooltip!">Text</button>
  <div class="sq">
    Foo
  </div>
</body>

【讨论】：

这个解决方案很棒，特别是如果您使用 Sass/LESS，因为您可以将样式表包含在另一个父选择器中
但不知何故，这种方法可能会产生一些问题，比如在某些情况下css 的大小很大。不能说它很棒，但很好的解决方案。
取决于 OP 或将来其他人想在哪里使用它，使用小样式或大样式。例如，有人决定重新设计整个模板。但是对..也许没关系。
+1。我过去做过这个，效果很好。我不记得所有细节了，但是 IIRC 我们将选项 1 和选项 2 分成两个单独的 SCSS 文件，然后将它们转译并合并在一起。

【解决方案6】：

你可以试试这样的：

let test = true;
$('#css_toggle').click(function() {
  if(test) {
    $('link.sty').attr("href","style.css");
    test = false;
  } else {
    $('link.sty').attr("href","style1.css");
    test = true;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link class="sty" href="style.css" rel="stylesheet">

<button id="css_toggle" title="I'm a tooltip!">Text</button>
<div class="sq"></div>

【讨论】：

【解决方案7】：

有要求的简单例子：

HTML：

<link rel="stylesheet" type="text/css" id='styles' href='path_to_your_style_1'>
<button id="css_toggle" title="I'm a tooltip!">Text</button>

JS：

 $('#css_toggle').click(function () {
  if ($("link[id='styles']").attr('href') == 'path_to_your_style_1'){
    $("link[id='styles']").attr('href', 'path_to_your_style_2');
  } else { 
    $("link[id='styles']").attr('href', 'path_to_your_style_1');
  }
});

【讨论】：