2.4 Manipulating Style

In this lesson you'll learn how to manipulate an elements style. And it's a lot like manipulating style in HTML. You can manipulate this style attribute by assigning individual CSS properties. Or you can manipulate the classes that we apply to an element. So let's take our attributes file, let's make a copy, and rename that to style.html. Of course want to change the titles, so that it's 2.4 and Style. But let's look at HTML first, and I'm going to set some style on this div element. So we would use the style attribute. And then let's say we wanted to set a background color as well as a foreground color. So we would do both of those things individually. We would have the background color set to blue, and then we would set the color property to white. And of course, if we look at this in the browser, we're going to have a very ugly list, but the style changed, at least. So that we know without a doubt that that is working. So in JavaScript, we essentially do the same thing. We use a style object that maps directly to the style attribute. And then we set the individual CSS properties. So that would look like this. Let's scroll on down past where we are a pending the ul, element because we can change an element's style anytime that we want. But this is going to give us the opportunity to talk about performance in a few moments. So we are going to set the style of the ul element, but I guess we could do the same thing for container. So, let's do container. So we have our container. We're going to set the background color. So we use the style property, which is an object. And if you are using Visual Studio Code, it's gonna prompt you with all of the CSS properties that you can use, which is practically all of them. Now, the main difference here is that we have camel cased property names. So if we wanted to set the background color, we can't do something like that because that's invalid, as far as JavaScript is concerned. So instead of hyphenating the properties, we have camel casing. So the hyphen is gone, and instead, we just have an uppercase C, backgroundColor. Then we could set that to blue. And then we would do the same thing for the color, except that we would set to color to white. So it's setting each individual property, one at a time, which is a little verbose because, in order to get to these properties, you have to have the element object followed by style and then the CSS property. But if we look at this in the browser, we're going to have the same results. And if we look at the resulting HTML, here's the div, we have style background-color blue; color: white. And just to point that out we no longer have that hard coded in the HTML. So we've just changed the style of that div element using JavaScript. But here is the thing, whenever an element is in the document and you make changes to that element, either by changing the content or by changing the style, the browser has to redraw the page. And if you have something this trivial, it's not a big deal. In fact, today's browsers are so very fast it's gonna take a lot of changes before you see any type of issue, as far as performance is concerned. Like for example, if we were gonna change 1,000 CSS properties one at a time, we might see a little lag. I haven't actually tried that, but that's the general idea. So when it comes to changing style, it's far more efficient if we change style based upon CSS classes. Because by changing a class, the browser still has to redraw the page, but it can apply all of the CSS properties of that class all at one time, as opposed to doing so individually one at a time. So we could do the same thing by writing a class. So let's write a class. And we're gonna add this at the top with our style element. And let's just call this blue-bg. And we, of course, are gonna have background-color: blue. We're also going to have color: white. But let's also have another class, one that's going to bold the text so that we can have the font-weight of being bold. So let's, first of all, apply this blue-bg class. Now, in the previous lesson he learned about the class name property, and so we can go ahead and set that to blue-bg. And that's going to be one change to the document. So the browser is only gonna have to make one extra draw of the page, which is more efficient than two. But let's say that's okay. We also wanted to apply that second class. Now, of course, we could just add it like this to where there's a space between both of the class names, and that's just like setting those through the class attribute. However, the majority of the time we want to be able to add a single class or add multiple classes to what is already existing in the class list. And to do that we use a property called classList. This is an object that lets us manipulate the classes applied to an element. So we can add a class by passing in bold in this case, and that is going to add the bold class to that element. We can see that text is bolded. But we can also remove classes with the remove method. And we simply specify the class that we want to remove. So here we have set the className to blue-bg. We added the bold class, we are removing the blue-bg class, and now we can see that we have just the bolded text applied. There's a third method called toggle, and we pass in the class that we want to toggle. And this is going to check to see if the provided class is already applied. If it is, then it's going to remove it. If it's not, it's going to add it. So if I call toggle and pass in bold, it's going to remove the bold class because it was already added to begin with. And if I call toggle once again with bold, it's going to readd that. Now, you may also want to check to see if a particular class is applied and you can do that too with the contains method. Just simply pass in the name of the class that you want to check is applied. Let's write this to the console so that we can see the result. This is actually going to return false because at the time that this line of code executes, this class is not applied to it. So if we look at the console, we see false. However, if we toggle this it's going to be added to the element and then the value is true. So when it comes to manipulating style, you can change individual CSS properties, using the style object, which where's it right there. But if you need to change multiple properties for a single element, it's much more efficient to manipulate the classes. You can use the className property if you want, but the className object gives you much more power.