rickardnilsson.net is a weblog and the online home of web developer and father of three, Rickard Nilsson... More
Rickard blogs about creating software solutions using ASP.NET and agile practices.
A colleague of mine asked me how to apply a stylesheet to a web page dynamically using jQuery and I had never done such a thing but my first thought was that is must be pretty simple. I've spent a lot of time thinking of so many things other than web et. al. so it was nice to delv into some of that stuff again. Check out the live demo.
As we know stylesheets are defined in the head section of an html file like this
<html> <head> <link rel="stylesheet" href="stylesheet.css" type="text/css" /> </head> <body> ...</html>
Now, say that we want to apply another stylesheet dynamically after the fact, so to speak, triggered by some event. This could be a button click or some other arbitrary event that is triggered. So, what we want to do is simply insert a new <link/> element into the head section of the page DOM. This can be done in a couple of lines of jQuery:
$(document).ready(function() { $("a").click(function() { $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />'); }); });
The key is at what time we add the link to the style sheet. The first line in the code above repeated here asserts that the DOM is ready for manipulation.
$(document).ready(function() { //... });
The second part repeated here adds a click event to all hyperlinks in the page.
$("a").click(function() { //...
And the very task is performed by the last piece of code where the head element is appended with a new link element.
$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
Related posts
Comments
September 8. 2008 14:56
Trackback from DotNetKicks.com Applying stylesheets dynamically with jQuery
DotNetKicks.com
September 9. 2008 10:29
Nice example, although I would personally prefer using something like either: ... $('head > link').filter(':first').attr('href', 'something.css'); ... or ... $('head > link').filter(':first').replaceWith('<link href="something.css" ... />'); ... Mainly since your code just appends a new <link> element to the DOM every time the link is clicked, without regard to the old one. Of course, these examples imply that a single <link> is used, but using jQuery selectors it would be quite easy to make it a bit "smarter".
Jonas
September 16. 2008 07:38
You're right, my attempt was at a very basic level, at best. However, just as intended. I like your first solution in particular but the requirements for the demo was that I needed to apply a second style sheet dynamically. Yours is replacing the first style sheet in the page. I agree that jQuery selectors makes it a whole lot easier and I'm planning another post with a more 'real-like' implementation.
Rickard
Add comment