6.4 Manipulating an Element's CSS Classes

Manipulating the DOM can be an expensive process because any change that we make the browser has to react to. And some of those changes can be very small. There are other changes that would require the entire page to be redrawn and every update that we make. Consumes CPU cycles. And as I've mentioned before, CPU cycles are precious. We want to conserve them as much as possible. So when it comes to working with style. If you find yourself setting multiple CSS properties on the same element. Well, you might want to rethink that because every time you update the DOM,the browser has to react to that update. So let's change our code back to kind of what we had a couple of lessons ago where we have retrieved our message element, and we set the foreground color to blue and the background color to yellow. So we are essentially doing two things here.The browser has to do two things, it has to set the color to blue. It has to set the background color to yellow. Let's throw in a third style. Let's set the text decoration to underline. So that makes three things.So if you find yourself doing this, it's better to use a class. And I'll show you why. So let's go to our HTML. And let's add the class, ugly text. And we need those three properties. So the color is blue. The background color is yellow. And then we have the text decoration, and that is underline. So every element in the DOM has this style property and we've been using that. Now there's another property called a class list, which gives us the ability to manipulate the classes that are applied to an element. So, you can have a class attribute and we could apply ugly text here. But we could also have other classes too. If we wanted to bold all of the text and we had a bold class, we could apply that. If we had a third class. There's no limit to the amount of classes that we have. So in order to work with all of these different classes, we have a class list property that gives us access to those, and we can do several things. The first thing is to add a class. So in this particular case, we want to add the ugly text class and that is going to apply that class to the element,and this is more efficient than setting the individual CSS properties because we've made one change to the DOM, which means that the browser only has to update once. Now if there's an add method, then it kind of goes without saying that there is a remove method and that will remove the class. And then there's a handy method called toggle, which will toggle that class. So if the class isn't applied to that element, it will add it. If it is added, then it will remove it. So, in this particular case it's going to add it, because we call toggle after we have removed it. And the great thing about these methods is that we can add multiple classes if we want to. So let's go back to our HTML. And let's add another class called bold. And this is simply going to set the font-weight to bold. So let's say that we wanted to apply both the ugly text and the bold classes, all we would have to do Is then passing a second class name. Now we haven't seen this before, or yes, we have the, sum function that we wrote, had two parameters to it. Didn't it? Well. All we have to do is separate the individual classes with a comma, and that is going to apply both of those classes. But then later if we decide, you know what? We don't want the bold class. So we can remove that,we can also remove multiple classes. So this gives us the ability to change an almost infinite amount of CSS by adding and removing as many classes that we want from that element.