Introduction
This article shows how to create a simple style switcher using jQuery and CSS. Look at the animated image below of what we are going to create.
![image001.gif]()
Creating HTML Body
Look at the body that I'll be using; you need to create the same.
<body>
<div id="NoStyleDIV" class="switcher">
<b>Style Switcher</b>
<br /><br />
<button id="switcher-default">
Default
</button>
<button id="switcher-red">
Red
</button>
<button id="switcher-blue">
Blue
</button>
<button id="switcher-green">
Green
</button>
</div>
<br /><br />
<div id="data">
<b>What is ITORIAN?</b>
<p>
Actually, a few years ago I decided to read every Computer Science and Programming books ever written. Almost all basics/fundamentals languages I finished before taking admission to a school or college. In the years 2007-2008 I've taken an admission for a Bachelor (Computer Application) for some certificates. And now in 2011, I completed my Bachelor's and now pursuing M.Sc.(IT).
</p>
<p>
Along the way, I kept each and every of my notes about computers and these notes eventually became ITORIAN after many revisions. And now, ITORIAN is a tangible record of my own thoughts about Computer and its Programming.
</p>
</div>
</body>
Creating Style
If you are done with the above, move on and create a style for it. We need a style that we will apply (add) to the body of the page when we click a button. Let's create the style:
<style type="text/css">
.red
{
color:Red;
}
.blue
{
color:Blue;
}
.green
{
color:Green;
}
.switcher
{
background-color:Gray;
width:310px;
padding:10px;
}
</style>
In the above style, I have created separate CSS classes for red, blue and green and a switcher class is especially for a <div> tag that holds all of the buttons. You can add some more styles in each of the classes given above.
Creating jQuery Functions
If you are done with all the above then create jQuery functions for button clicks. Here you go.
<script type="text/javascript">
$(document).ready(function () {
$('#switcher-default').bind('click', function () {
$('body').removeClass();
$("#NoStyleDIV").css("color", "Black");
});
$('#switcher-red').bind('click', function () {
$('body').addClass('red');
$('body').removeClass('blue');
$('body').removeClass('green');
$('body').removeClass('yellow');
$("#NoStyleDIV").css("color", "Black");
});
$('#switcher-blue').bind('click', function () {
$('body').addClass('blue');
$('body').removeClass('red');
$('body').removeClass('green');
$('body').removeClass('yellow');
$("#NoStyleDIV").css("color", "Black");
});
$('#switcher-green').bind('click', function () {
$('body').addClass('green');
$('body').removeClass('red');
$('body').removeClass('blue');
$('body').removeClass('yellow');
$("#NoStyleDIV").css("color", "Black");
});
});
</script>
Note: Remember to add the reference of the jQuery file on your page to support the functions shown above.
Let's talk about distinct code that I have used above.
$('#switcher-red').bind('click', function () {
Using #switcher-red, I'm selecting the button control by id and then binding a function to its click event.
$('body').addClass('red');
In the above code, I'm selecting the body tag of the page; remember I have not used any . or # operators because a tag is being selected itself, so we don't need to use . or #. And adding a CSS class named 'red' with the body tag.
$('body').removeClass('green');
Using removeClass(), I'm just removing the pre-added class from the body tag.
$("#NoStyleDIV").css("color", "Black");
# is id selector, so by using the above line I'm adding a CSS to NoStyleDIV named div tag. Look in the above code; I have placed all my buttons inside this <div> and I don't want to apply any style to that particular <div> tag whenever the button is clicked.
Download the sample project attached with this article and test it yourself.
I hope you like it. Thanks.