Question

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

我可以在点击时触发样式表，但无法将其切换回原始样式：

<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();
});

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

Answer 1

更好，更可靠的解决方案是使用单个样式表并通过使规则依赖于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>

Answer 2

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

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

摘要

以下解决方案存储相对文件路径（典型的标准的Wordpress安装）到变量（你可能并不总是有唯一的标识符（id属性值）可供使用，并且因为编辑核心文件，包括一个，不被认为是好的做法（原因不是触及这里）将这些文件路径存储在变量中可能更好;）
在.click()的{{1}}上，'#css_toggle'方法用于循环遍历样式表的所有实例（其中最多的样式表）可能是少数），它还允许我们重新定义范围 .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'));
      
    }
  });

});

Answer 3

有一个简单的例子：

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');
  }
});

Answer 4

您可以使用分离使用jquery

<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

Answer 5

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

＆＃13;

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');
  }
});

＆＃13;

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

＆＃13;

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

$('#css') // jquery selector

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

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

Answer 7

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

总而言之，此代码产生一个在两个样式表（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块或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>'
        );
    }
}

在两个样式表

7 个答案: