我试图添加一个非常简单的方法切换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();
});
这是一个非常简单的例子,所以在继续之前我可以理解如何做到这一点.任何想法如何让它切换回第一个样式表？
Ror*_*san 13
更好,更可靠的解决方案是使用单个样式表并通过使规则依赖于类上的类来交替样式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>如果由于某种原因无法应用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>
摘要
id可供使用的唯一标识符(属性值),并且因为编辑核心文件(包括一个)不被视为良好实践(原因不明)这里不会涉及)将这些文件路径存储在变量中可能更好);.click()中'#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'));
}
});
});<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>