Menu
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?
956
Use rel="stylesheet" to link to the default style, and rel="alternate stylesheet" to link to alternative style sheets. This tells the browser which style sheet title should be selected by default, and makes that default selection apply in browsers that do not support alternate style sheets.
Answer. Yes, you can apply more than one stylesheet to an HTML file. For each stylesheet you link to a page, you would just need to add an additional <link> element.
Yes, It is possible to include one CSS file in another and it can be done multiple times. Also, import multiple CSS files in the main HTML file or in the main CSS file. It can be done by using @import keyword.
To combine external CSS files, you can simply copy / paste all of your CSS code into one main file. Therefore all of the content from within the other CSS files will now reside within the main file allowing the browser to only make one request for a CSS file instead of multiple.
A better, and more reliable, solution would be to use a single stylesheet and alternate the styling by making the rules depend on a class on the body. You can then just toggle that class when needed, something like this:
$('#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>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>
Summary
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);.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;link currently in scope
has its href attribute stored in a variable;href
attribute of the link element in question is updated accordinglyCode Snippet Demonstration:
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
