在两个样式表之间切换 [英] Toggle between two stylesheets

问题描述

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

I am trying to add in a very simple method of switching between 2 stylesheets.

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

I can get the stylesheet to fire on click but not able to toggle it back to its original:

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

这是一个非常简单的示例，因此在继续之前，我可以了解如何进行操作.我如何获得它的任何想法都可以切换回第一个样式表?

this is a VERY simple example so I can understand how to do it before I continue on. Any ideas how I can get it toggle back to the first stylesheet?

推荐答案

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

This is an alternative solution to consider if, for some reason, Rory's solution cannot be applied. It's ideal to simply toggle a body class and use this class as a base selector - I've recently applied this method for an application switching between a dark and light theme, then storing it to localStorage so that the changes are "remembered" e.g:

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

摘要

1. 以下解决方案存储相对文件路径(通常为 标准的Wordpress安装)变量(您可能并不总是具有唯一的标识符(id属性值)可供使用，并且由于编辑核心文件(包括其中一个文件)不被认为是一种好习惯(由于不会涉及的原因)此处)将这些文件路径存储在变量中可能会更好)；
2. 在'#css_toggle'的.click()上，.each()方法用于 遍历样式表的所有实例(其中大多数 可能是几个)，这也使我们可以重新定义范围 $(this)这将有助于前进；
3. 通过循环的每次迭代，当前在范围内的link 将其href属性存储在变量中；
4. 然后将此属性的存储值与 我们以前存储在变量中的相对文件路径
5. 如果发现它们包含这些存储的值，则href 相应的link元素的属性会相应更新

1. The below solution stores the relative filepaths (typical of standard Wordpress installations) to variables (you may not always have unique identifiers (id attribute values) available to use, and since editing core files, to include one, is not considered good practice (for reasons that won't be touched on here) it may be better to store these filepaths in variables);
2. On .click() of '#css_toggle', the .each() method is used to loop through all instances of stylesheets (of which there would most likely be a few), it also allows us to redefine the scope of $(this) which will prove helpful moving forward;
3. Through each iteration of the loop, the link currently in scope has its href attribute stored in a variable;
4. The stored value of this attribute is then compared with the relative filepaths we stored in variables previously
5. If they are found to contain these stored values, the href attribute of the link element in question is updated accordingly

代码段演示:

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>

这篇关于在两个样式表之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！