konfuzius
1/3/2014 - 11:12 PM

Simple way to implement a stylesheet switcher, using jquery and proper html. Add your stylesheets to your <head> tag: <link rel="alternate

Simple way to implement a stylesheet switcher, using jquery and proper html. Add your stylesheets to your tag: Include the jquery stylesheet switcher. Done.

stylesheet-switcher.js
content_copyfile_download
// STYLESHEET SWITCHER
(function($)
	{
		//  All Alternate stylesheets Selector
		var $links = $('link[rel*=alternate][title]');
		
		$('body').prepend('<div id="toolbar"><select id="css-selector"></select></div>');
		var options= '<option value="">Select stylesheet:</option>';
		$links.each(function(index,value){
			options +='<option value="'+$(this).attr('href')+'">'+$(this).attr('title')+'</option>';
		});
		$links.remove();
		
		$('#css-selector').append(options)
			.bind('change',function(){
			$('link[rel*=jquery]').remove();
			$('head').append('<link rel="stylesheet jquery" href="'+$(this).val()+'" type="text/css" />');
		});
		
	}
)(jQuery);
index.html
content_copyfile_download
<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        
        
        <link rel="stylesheet" title="main" href="normalize.min.css" type="text/css">
        <link rel="stylesheet" title="main" href="main.css" type="text/css">
        <link rel="alternate stylesheet" title="red" href="red.css" type="text/css">
        <link rel="alternate stylesheet" title="blue" href="blue.css" type="text/css">

    </head>
    <body>

    <p>Hello World</p>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>

        <script src="stylesheet-switcher.js"></script>
    </body>
</html>