jQuery Add and Remove stylesheets

If your looking to enhance the experience of your visitors by offering them the ability of changing the layout and or colours on your webpage then this jQuery snippet could be handy for you.

With the use of cookies or even better the new HTML5 local storage feature the users preferences will be saved on there computer.

Using local storage is easier to code and quicker than using php and cookies and remember that’s what jQuery is all about “Write Less, Do More”.

Remove stylesheet

To remove a stylesheet simply give it an id
<link href=”cssFolder/sheet2.css” rel=”stylesheet” type=”text/css” id=”sheet2″>
And insert the following script just before </body> tag

<script type="text/javascript">
$(document).ready(function () {
jQuery('#sheet2').remove();
});
</script>

 
Demo
 

Add stylesheet

To Add a stylesheet insert the following script just before </body> tag

<script type="text/javascript">
$(document).ready(function () {
$('head').append('<link href="cssFolder/sheet2.css" rel="stylesheet" id="banSheet" />');
});
</script>

 
Demo

Although i have used document ready in the snippets above i have used the click function in the 2 demo files just to give you an idea of what can be done.

Bored?

Have a go yourself at designing a simple colour changer or text re-sizer for your page.