FREELessons: 19Length: 2.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.2 Manipulating CSS Classes With jQuery

Changing the classes assigned to an element (or elements) is the most efficient way to manipulate its style. jQuery makes this easy with the addClass(), removeClass(), and toggleClass() methods.

5.2 Manipulating CSS Classes With jQuery

A few lessons ago we started talking about jQuery. And one of the things that we spent just a very very very small amount of time with was changing the style of an element, and we did so using the CSS method. Now there's a problem with the CSS method, in that it only changes a single CSS property at a time. And that's very apparent here, because we are calling the CSS method, we are passing in the color property that we want to change to the value of red. Now, there is another way that we can use the CSS method, and that it to pass in a JavaScript object, and then this object would have the properties and values that we wanted to change. So we could say that the color is going to be red, and then we could also change the backgroundColor to blue, and that would be hideous, but that's what we could do. We could also say textDecoration is going to be underlined. So if we go to the browser and refresh the page, we of course, see those changes. But the problem is that even though it looks like that we're changing all of these at once, we're not. Behind the scenes, jQuery is going to change the color to red, and then after that's done it's going to change the backgroundColor to blue. And then after that's done it will change the textDecoration to underline. And the reason why that's a problem, is because anytime that you make any changes within an HTML document, the browser has to actually make those changes. So in the case of changing those three properties, the browser had to update at least three times. And in reality, these are just simple cosmetic changes so it's not that big of a deal. But if you start incorporating changes to the layout so that the browser, not only has to change the way that something looks but also calculate and reflow the page, well, then you can start to see some performance issues. So instead of using the CSS method and changing individual properties at a time, what we can do is use CSS classes. Because whenever you apply or remove a class from an element, that makes it easier for the browser to modify the style of the element. So, jQuery gives us several methods for working with classes. The first is called addClass. And, as its name implies, this allows you to add one or multiple classes to the element. So, I have some classes defined. One is called important-text, it has a font-weight of bold, it has text-decoration of underline, and then we have another class called red and it's simply changes the color to red. So let's use the important-text class first. So we're calling the addClass method on the jQuery object for the main-content. So whenever this code executes, it's essentially going to change our class attribute here, so that important-text is going to be added to the classes. So if we go to the browser and refresh, we see that change. The font is bold and the text is underlined. But we can also pass in multiple classes, so that we can add as many classes to an element that we want. Now we're not only changing the elements to have bold and underlined text, we're also changing it to have a red color as well. And of course if we wanted to apply more CSS classes to this elements, we could just add them by separating them with spaces. Now if we have an addClass method, it kind of goes without saying, that we have a removeClass method. And as its name implies, it removes a class from an element. So let's say that we want to remove the red class. So we added it and then, nah, let's just take it out. Now, let me first of all say that there's no reason why we would want to do this in a real application. We wouldn't want to add a class, and then immediately remove it. But this is good for demonstrative purposes. So whenever we refresh the page, we've added the red class, but we immediately removed it, so we just see bold and underlined text. But we can also say that's, well, let's remove that important-text class, as well. And so the order in which you pass these classes doesn't matter, at least as far as adding and removing are concerned. So whenever we run this again, we now just have normal text. But let's just remove the red class. And we are going to talk about another method called toggleClass. But let's do this, let's say mainContent equals, and then we are going to get our element with jQuery, and then we are going to use our mainContent variable here, so that we don't have to keep querying the document. So, we have another method called toggleClass. And this is fairly straightforward. Basically, if you specify the class that you want to toggle, we're going to toggle important-text. So, it's going to first of all check to see if the important-text class is applied to that element. If it is, it's going to remove that class, but if the class is not there, then it's going to add it. So it's toggling that class. So whenever we refresh the page, we see just normal text. But let's also toggle the red class, so we are toggling the important-text class off, and we are toggling the red class on. So, just like the other methods, we can pass in multiple classes to toggle. Now, there's one other method called the hasClass. And this returns true or false based upon if the class that you specify is applied to that element. So we're using mainContent, we're calling the hasClass method, and we're specifying the red class, which at the time that this code executes that should be true. So let's do this. Let's store this in a variable, and we'll just call this hasRead, and this will allow us to use it with a decision. Now we haven't talked about decisions or conditions or anything like that, but an if statement is very straightforward. Basically, we are going to make a decision. If something is true, then we are going to execute certain code. So we have if, followed a pair of parentheses. And inside of this parentheses, is what we call the condition. This is something that is going to result in true or false. But in our case, we already have something that is true or false, this hasRed variable. So, if we simply just say if hasRed, we're asking if hasRed is true, and if it is, then we are going to alert a message that says Red is applied. So whenever we head on over to the browser, let's refresh the page, we will see the alert box Red is applied. However, if we make it so that Red is not applied by just not toggling that class, we're not going to see that message at all. The reason being, because hasClass or hasRed, rather, is now false, and so the way that we can read this if statement, if hasRed is true, then we alert this method. But hasRed is false, so therefore, this is not true. We don't see the code that executes inside of this pair of curly braces. So when it comes to changing an element's style, and more specifically, changing multiple CSS properties on an element, use CSS classes. And jQuery makes it very easy to do so with the addClass and removeClass methods, as well as the toggleClass method.

Back to the top