Changing CSS classes

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.