jQuery Change CSS File Dynamically

Sam Deering
Tweet

How to change a css file dynamically using nothing but good old fashion jQuery! (it’s kinda like a jQuery stylesheet switcher!)

The jQuery

$(document).ready(function() {
	$("#nav li a").click(function() {
		$("link").attr("href",$(this).attr('rel'));
		return false;
	});
});

OR (a more complex version to swop the css files dynamically)

$(document).ready(function() {
	if($.cookie("css")) {
		$("link").attr("href",$.cookie("css"));
	}
	$("#nav li a").click(function() {
		$("link").attr("href",$(this).attr('rel'));
		$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
		return false;
	});
});

OR (a version which reduces the flicker which occurs when ths page refreshes with the new css syles after the css is swopped using the relative attribute of the link in the html code).

if($.cookie("css")) {
	$("link").attr("href",$.cookie("css"));
}
$(document).ready(function() {
	$("#nav li a").click(function() {
		$("link").attr("href",$(this).attr('rel'));
		$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
		return false;
	});
});

The HTML

The html is simple with the css and jQuery files loaded as normal in the header of the html.

<link rel="stylesheet" type="text/css" href="style1.css" />
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.cookie.js"></script>
<script>... your jQuery goes here...</script>

Test it out! Here is a couple of links to try it for yourself.

<ul id="nav">
	<li><a href="#" rel="/path/to/style1.css">Default CSS</a></li>
	<li><a href="#" rel="/path/to/style2.css">Larger Text</a></li>
	<li><a href="#" rel="/path/to/style3.css">Something Different</a></li>
</ul>

Source
Demo

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Pingback: 10 jQuery Enhanced CSS Buttons | jQuery4u

  • http://www.pianetawebdesign.it Dimitri

    Hi there, I becoming crazy about a functionality I even doubt exist. I follow your post, but still not so good. Please help me find a solution: Is it possible with jquery to update a jquery page itself? I mean this logic particulary : If you click this button, update the jquery file. Maybe I am just dreaming, but I will thank you if you help me. have a nice day and great blog bye dimitri from italy ;)

  • Jason

    This is great if you only have one css style sheet. But how do you switch only one of a few style sheets? For example, if you had a base.css and a fontSizeSmall.css, fontSizeMed.css, etc., how could you select only the fontSize css file to swap? Selecting “link” is too grabby…

    • Amine Dkhili

      hi jason

      add class on link

      and call like this

      $(“link.a”).attr(“href”,$(this).attr(‘rel’));

      sorry for bad english :v

  • http://jquery4u.com/ jQuery4u

    Hi Jason, I would suggest using this method: http://www.jquery4u.com/javascript-libraries/load-jquery-library-with-fallback/
    and here has example of loading the latest version automatically. http://www.jquery4u.com/news/load-jquery-google-libraries-api/
    But I would suggest testing the library with your site/app out before using a newer version. Just make a list of primary things that should work and test against that.
    Sam

  • Bob

    “Swapped.”

  • Pingback: Javascript: Change CSS File Dynamically + Cookie - Tech Forum Network

  • Kavana

    This works for single jsp page. what i can do, if i want that the selected theme should affect for all remaining jsp pages