In the last talk-through, I showed how to set styles in JavaScript, like this.
Now, if you set a lot of styles in JavaScript, you could end up
with hundreds of lines of code just setting CSS property values.
And that can really clutter up your JavaScript.
There's another way we could do this.
We could create a CSS class,
and add a CSS rule for that class with the new styles that we want,
and then dynamically add that class name in JavaScript.
Let's start up here at the `` tag and try this out.
We'll make a `.catcolors` class, and the CSS rule for it.
And it will have `color: orange`, and `background-color: black`.
Now to assign that to the `heading` element, we can say:
`headingEl.className = "catcolors";
And we can delete the assignment of the color
and background color in JavaScript.
Ta-da!
So that worked.
Now, notice something weird?
The HTML attribute for class names is just `class`.
If I had done this in HTML, it would have been `class="catcolors"`.
But when I did it in JavaScript, I had to say `.className`,
which is not what we're used to.
And that is because `class` is actually a keyword in the JavaScript language
which has a special meaning for the language.
So because of that, browsers decided to use `className` to refer
to the HTML class attribute, just to make sure they wouldn't get confused.
So remember, if you want to set the class attribute of an element,
you say dot className equals.
Now to assign that to each of the animal names,
we can put it inside the loop, so:
`nameEls[i].className = "catColors";`
That will add the class name, but actually it will remove any classes
that were there before, because we said equals.
So if we had any classes there before, those are now gone.
Now, they did have classes before, class equals animal.
And so that's become catColors.
So what we really want to do, is add a new class name to this class attribute.
And we can do that by saying plus equals space catColors.
There we go.
So that's the safe thing to do, because it will take
whatever the previous class was, add a space and then the new class to it.
There is another way to do this in newer browsers,
using the `classList` property.
So to do that, we say: `nameEls[i].classList.add("catcolors");`.
Now that's a lot nicer, but doesn't work everywhere.
So if you do want to use that, you have to go to caniuse.com,
and make sure it's supported in all the browsers
that you want your webpage to work in.
It is a lot nicer, but it's not nice if your webpage breaks
because you're using a function that the browser doesn't know about.
So I'll just comment it out.
Because I want mine working in a lot of browsers.
There are still lots of times when we want to change individual styles,
instead of assigning class names.
So once again, just remember that you have both of these tools in your toolbox,
and think about what might be best depending on the situation.