在两个样式表之间切换

我试图添加一个非常简单的方法来切换2个样式表。

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

Text 
 

 $('#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

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

摘要

1. 以下解决方案将相对文件路径（典型的标准Wordpress安装）存储到变量（您可能并不总是具有可用的唯一标识符（ id属性值），并且因为编辑核心文件（包括一个）不被视为良好实践（对于这里不会涉及的原因）将这些文件路径存储在变量中可能更好）;
2. 在'#css_toggle'的.each() ， .each()方法用于遍历样式表的所有实例（其中很可能是少数），它还允许我们重新定义$(this)的范围$(this)这将certificate有助于前进;
3. 通过循环的每次迭代，当前范围内的link将其href属性存储在变量中;
4. 然后将此属性的存储值与先前存储在变量中的相对文件路径进行比较
5. 如果发现它们包含这些存储的值，则相应地更新所讨论的link元素的href属性

代码片段演示：

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

   Text 

Answer 2

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

   Text 
 Foo 
  

Answer 3

有一个简单的例子：

HTML：

  Text 

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

Answer 5

你可以尝试这样的事情：

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

   Text 
 

Answer 6

而不是长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'); } }); 

  Toggle