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.




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

Source
Demo

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


  • 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

  • http://www.abrentco.com/ Kevin Brent – Realty One Group

    Great Thanks!

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.