jQuery Add CSS
Coding - Javascript - jQuery - CSS

How To: jQuery Add CSS and Remove CSS

There are multiple ways to add and remove CSS styling using jQuery. This is a quick tutorial to show you how.

Sometimes you’ll have a need to, for example, have an element on the page change or disappear when the user performs an action, such as clicking or hovering. These are common tasks that frequently arise in web development. All of this can be achieved with just a little jQuery.

If you need an introduction to jQuery, check out this post. We also have an introduction to JavaScript.

Using jQuery css() to Add or Remove CSS

Let’s say you have two buttons on the page and you want them to change the background color of a different element when they are clicked.

This is how you do it with the jQuery css() function:

The HTML…

<p class="info-box">Lorem ipsum dolor sit...</p>
<button class="red-button">Red</button>
<button class="blue-button">Blue</button>

The CSS…

.info-box {
    background-color: #efefef; /* Light Gray */
    padding: 10px;
}

The JavaScript…

$('.red-button').click(function(){
    $('.info-box').css( 'background-color', '#FF8F87' );
});
$('.blue-button').click(function(){
    $('.info-box').css( 'background-color', '#6EB6FF' );
});

And the jQuery Add CSS Demo:

What we’re doing here is whenever an element with the red-button class is clicked, the elements with a class of info-box have their background changed to red with this line:

$('.info-box').css( 'background-color', '#FF8F87' );

It’s that easy. Any CSS property and value can be added with this method. You can also change multiple CSS properties at once, using a slightly different syntax:

$('.red-button').click(function(){
    $('.info-box').css({
        'background-color': '#FF8F87',
        'color': '#FFFFFF',
        'padding': '40px'
    });
});
$('.blue-button').click(function(){    
    $('.info-box').css({
        'background-color': '#6EB6FF',
        'color': '#000000',
        'padding': '20px'
    });
});

We are able to modify multiple CSS properties with the click of a button. The red button now changes background color, the color of the text and the padding. The blue button removes the extra padding and changes the color of the text to black.

Adding A Class Using jQuery’s addClass() Function

Now let’s accomplish the same task but let’s do it using jQuery’s built in addClass function. This will require some changes from the start, but it will also allow our project to scale as we add more elements to the page.

Our HTML will stay the same:

<p class="info-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta iure officia explicabo corrupti iste suscipit laboriosam ipsam sapiente obcaecati maxime! Quisquam recusandae nemo sequi est veniam unde odit dicta dolorum.</p>
<button class="red-button">Red</button>
<button class="blue-button">Blue</button>

We add two new classes to our CSS. We will use jQuery to add these new classes to our element at the appropriate time.

.info-box {
    background-color: #efefef; /* Light Gray */
    padding: 10px;
}

.red {
    background-color: #FF8F87;
    color: #FFFFFF;
    padding: 40px;
}

.blue {
    background-color: #6EB6FF;
    color: #000000;
    padding: 20px;
}

And we have a handful of JavaScript changes that need to be made:

$('.red-button').click(function(){
    $('.info-box').addClass('red');
});
$('.blue-button').click(function(){    
    $('.info-box').addClass('blue');
});

We are using the jQuery addClass function to, as it says, add a class to the selected element. In this case we are adding the red class to the info-box element whenever the button with class red-button is clicked. We do the same with the blue-button button and the blue class.

And our demo looks like this, but if you try it you’ll see we have a small problem:

Since all we are doing is adding classes, then each time a button is clicked, a class is added (if it doesn’t already exist). This means if you click both buttons then the info-box element will have both the red class and the blue class. Since .blue comes after .red in the stylesheet, it takes precedence, leaving us with a blue background everytime.

Let’s fix this…

Using jQuery’s removeClass() Function

All we have to do is add two simple lines using the removeClass function to remove the opposite class from the info-box paragraph when a button is clicked.

$('.red-button').click(function(){
    $('.info-box').addClass('red');   
    $('.info-box').removeClass('blue');    
});
$('.blue-button').click(function(){    
    $('.info-box').addClass('blue');
    $('.info-box').removeClass('red');  
});

This can be shortened using jQuery’s Chaining:

$('.red-button').click(function(){
    $('.info-box').addClass('red').removeClass('blue');    
});
$('.blue-button').click(function(){    
    $('.info-box').addClass('blue').removeClass('red');  
});

And here’s our final demo:

If you have any questions or comments, please let us know in the comments below.

About the author

Chris Alexander is the founder of Syntaxxx.com. He is an entreprenuer, web developer, father and husband. Follow Chris on Twitter @SyntaxxxBlog

Share this post

1 Comment

  1. Another option is to use jQuery’s toggleClass https://api.jquery.com/toggleClass/

    By which you could do something like:

    $(‘.red-button’).on(‘click’, function(){
    $(‘.info-box’).toggleClass(‘red’).toggleClass(‘blue’);
    });

    But that is assuming that, there is an initial state of either color. So something like:

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta iure officia explicabo corrupti iste suscipit laboriosam ipsam sapiente obcaecati maxime! Quisquam recusandae nemo sequi est veniam unde odit dicta dolorum.

    Which then would toggle red to be “off” and toggle blue to be “on”.

Leave a Comment

Subscribe To Our Newsletter