WEBVTT

00:00:00.702 --> 00:00:05.963
In the last talk-through, I showed how
to set styles in JavaScript, like this.

00:00:05.963 --> 00:00:10.202
Now, if you set a lot of styles
in JavaScript, you could end up

00:00:10.202 --> 00:00:14.671
with hundreds of lines of code
just setting CSS property values.

00:00:14.671 --> 00:00:18.076
And that can really
clutter up your JavaScript.

00:00:18.076 --> 00:00:20.666
There's another way we could do this.

00:00:20.666 --> 00:00:23.213
We could create a CSS class,


00:00:23.213 --> 00:00:28.275
and add a CSS rule for that class
with the new styles that we want,

00:00:28.275 --> 00:00:33.116
and then dynamically
add that class name in JavaScript.

00:00:33.116 --> 00:00:38.932
Let's start up here at the `` tag 
and try this out.

00:00:38.932 --> 00:00:45.798
We'll make a `.catcolors` class,
and the CSS rule for it.

00:00:45.798 --> 00:00:53.085
And it will have `color: orange`,
and `background-color: black`.

00:00:53.085 --> 00:00:58.854
Now to assign that to the
`heading` element, we can say:

00:00:58.854 --> 00:01:05.813
`headingEl.className = "catcolors";

00:01:05.813 --> 00:01:09.485
And we can delete
the assignment of the color

00:01:09.485 --> 00:01:12.222
and background color in JavaScript.

00:01:12.222 --> 00:01:13.322
Ta-da!

00:01:13.322 --> 00:01:15.113
So that worked.

00:01:15.113 --> 00:01:17.466
Now, notice something weird?

00:01:17.466 --> 00:01:21.249
The HTML attribute
for class names is just `class`.

00:01:21.249 --> 00:01:26.779
If I had done this in HTML,
it would have been `class="catcolors"`.

00:01:26.779 --> 00:01:31.589
But when I did it in JavaScript,
I had to say `.className`,

00:01:31.589 --> 00:01:33.806
which is not what we're used to.

00:01:33.806 --> 00:01:39.084
And that is because `class` is actually
a keyword in the JavaScript language

00:01:39.084 --> 00:01:42.613
which has a special meaning
for the language.

00:01:42.613 --> 00:01:47.534
So because of that, browsers decided
to use `className` to refer

00:01:47.534 --> 00:01:52.205
to the HTML class attribute, just to
make sure they wouldn't get confused.

00:01:52.205 --> 00:01:56.613
So remember, if you want to set
the class attribute of an element,

00:01:56.613 --> 00:02:00.333
you say dot className equals.

00:02:00.333 --> 00:02:04.383
Now to assign that to each
of the animal names,

00:02:04.383 --> 00:02:06.657
we can put it inside the loop, so:

00:02:06.657 --> 00:02:13.449
`nameEls[i].className = "catColors";`

00:02:13.449 --> 00:02:19.427
That will add the class name,
but actually it will remove any classes

00:02:19.427 --> 00:02:23.704
that were there before,
because we said equals.

00:02:23.704 --> 00:02:28.236
So if we had any classes there before,
those are now gone.

00:02:28.236 --> 00:02:32.053
Now, they did have classes before,
class equals animal.

00:02:32.053 --> 00:02:34.340
And so that's become catColors.

00:02:34.340 --> 00:02:41.305
So what we really want to do, is add
a new class name to this class attribute.

00:02:41.305 --> 00:02:47.562
And we can do that by saying
plus equals space catColors.

00:02:47.562 --> 00:02:48.828
There we go.

00:02:48.828 --> 00:02:52.044
So that's the safe thing to do,
because it will take

00:02:52.044 --> 00:02:58.048
whatever the previous class was,
add a space and then the new class to it.

00:02:58.048 --> 00:03:02.209
There is another way to do this
in newer browsers,

00:03:02.209 --> 00:03:04.975
using the `classList` property.

00:03:04.975 --> 00:03:15.035
So to do that, we say:
`nameEls[i].classList.add("catcolors");`.

00:03:15.035 --> 00:03:19.649
Now that's a lot nicer, 
but doesn't work everywhere.

00:03:19.649 --> 00:03:24.014
So if you do want to use that,
you have to go to caniuse.com,

00:03:24.014 --> 00:03:26.532
and make sure it's supported
in all the browsers

00:03:26.532 --> 00:03:28.756
that you want your webpage to work in.

00:03:28.756 --> 00:03:32.189
It is a lot nicer, but it's not nice
if your webpage breaks

00:03:32.189 --> 00:03:36.254
because you're using a function
that the browser doesn't know about.

00:03:36.254 --> 00:03:38.143
So I'll just comment it out.

00:03:38.143 --> 00:03:41.337
Because I want mine working
in a lot of browsers.

00:03:41.337 --> 00:03:46.067
There are still lots of times when we
want to change individual styles,

00:03:46.067 --> 00:03:48.558
instead of assigning class names.

00:03:48.558 --> 00:03:54.463
So once again, just remember that you have
both of these tools in your toolbox,

00:03:54.463 --> 00:03:59.083
and think about what might be best
depending on the situation.