A Brief Introduction

Changing up the CSS of a site or application on the fly is no easy task, and will definitely require a hefty amount of JavaScript to get where you’re trying to go. However, with JQuery, we can grab a hold of any CSS property we’d like and manipulate it to our heart’s content. Today, we’ll take a look at some of the built-in methods that JQuery provides us to help change the styling of elements in real time.

Step 1: The HTML

We’ll use sets of divs to explore the CSS capabilities of JQuery. Each div will be given a unique id as well as a class of ‘div‘ to make styling the group a bit easier. Here’s what they should look like:

Later, we’ll add some more classes to a couple of our divs. For now, we’ll continue and get into a bit of CSS.

Step 2: The CSS  

We’ll need a default style for all of our divs to take, as well as a few styles that we’ll add via JQuery. In order to better see the divs, we’ve given them a height, width, and margin declaration. We’ve added a background color and box-shadow purely for your visual stimulation enjoy. Here’s what the .div class should look like:

Step 3: The JavaScript

JQuery provides us over a dozen ways to get and set values in a cascading style sheet. Today, we’ll discuss three of the most useful, as well as most commonly used; addClass(), removeClass(), and toggleClass(). These are fairly self-explanatory, and do exactly as their names imply. The addClass() function adds a CSS class to an element when called upon. You simply pass in the name of the class as a string and let the function work its magic. The removeClass() function does exactly the opposite, and takes a class away from an element. Finally, toggleClass()will add or remove a class depending on the element’s current state. We’ll see how this can come in handy shortly.

3.1: addClass()

The first function we’ll take a look at is the addClass() function. This is a very simple way to add a class to an element, and can be used in multiple different scenarios. In the full CSS file that’s included with the downloadable source code, you’ll see that we have a class called selected. This class will add a thicker, more visible black border around an element that is a part of the class. In order to implement this in JQuery, we’ll need to attach a click event handler to our divs, and use the addClass() function. Here’s what the function looks like:

Now, any div that we click will have the class ‘selected’ added to it. After downloading the source files, view the page in the browser and click each div to see it in action. When you click, you’ll see the border added just as you’d expect.

3.2: removeClass()

The removeClass() function also does exactly what you’d expect it to do; remove a class. I’ve gone back into the HTML and added a class to the first div called ‘firstDiv‘. This class is making the first square on the page black instead of blue. We’ll use the removeClass() function to take this class away, leaving the default purplish-blue color. Here’s what the function looks like in use:

Now, when you load up the page, the first div will be black by default. However, clicking on the first div will result in the removeClass function being run, and the firstDiv class being removed.

3.3: toggleClass()

Last but not least there is the toggleClass() function. This is slightly more useful than the others, in that you can add and remove a class all in one declaration. For instance, we’ve so far been able to add the ‘selected’ class by clicking on a div once, but in order to remove it; we’d need to add some more JavaScript. If, instead, we would have used the toggleClass() function, we’d be able to remove the class by clicking the div again once the class was added initially. Let’s change the addClass() function and use toggleClass() instead:

Now we can simply click a div to add the ‘selected’ class, and click it again to remove the class thanks to the toggleClass() function.

A Few Last Words

I have yet to find a better way to add and remove CSS classes than via JQuery. The methods are so ridiculously easy to use that any other way is just uncivilized. Don’t get me wrong, nothing can top just plain old JavaScript, but boy does JQuery make things simple. In our next tutorial, we’ll get into retrieving height and width dimensions with JQuery. See you next time!

Download Source Files