Simple Style Switcher Using JQuery and CSS: Part 1

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.