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

0:00:05.963,0:00:10.202
Now, if you set a lot of styles[br]in JavaScript, you could end up

0:00:10.202,0:00:14.671
with hundreds of lines of code[br]just setting CSS property values.

0:00:14.671,0:00:18.076
And that can really[br]clutter up your JavaScript.

0:00:18.076,0:00:20.666
There's another way we could do this.

0:00:20.666,0:00:23.213
We could create a CSS class,[br]

0:00:23.213,0:00:28.275
and add a CSS rule for that class[br]with the new styles that we want,

0:00:28.275,0:00:33.116
and then dynamically[br]add that class name in JavaScript.

0:00:33.116,0:00:38.932
Let's start up here at the `` tag [br]and try this out.

0:00:38.932,0:00:45.798
We'll make a `.catcolors` class,[br]and the CSS rule for it.

0:00:45.798,0:00:53.085
And it will have `color: orange`,[br]and `background-color: black`.

0:00:53.085,0:00:58.854
Now to assign that to the[br]`heading` element, we can say:

0:00:58.854,0:01:05.813
`headingEl.className = "catcolors";

0:01:05.813,0:01:09.485
And we can delete[br]the assignment of the color

0:01:09.485,0:01:12.222
and background color in JavaScript.

0:01:12.222,0:01:13.322
Ta-da!

0:01:13.322,0:01:15.113
So that worked.

0:01:15.113,0:01:17.466
Now, notice something weird?

0:01:17.466,0:01:21.249
The HTML attribute[br]for class names is just `class`.

0:01:21.249,0:01:26.779
If I had done this in HTML,[br]it would have been `class="catcolors"`.

0:01:26.779,0:01:31.589
But when I did it in JavaScript,[br]I had to say `.className`,

0:01:31.589,0:01:33.806
which is not what we're used to.

0:01:33.806,0:01:39.084
And that is because `class` is actually[br]a keyword in the JavaScript language

0:01:39.084,0:01:42.613
which has a special meaning[br]for the language.

0:01:42.613,0:01:47.534
So because of that, browsers decided[br]to use `className` to refer

0:01:47.534,0:01:52.205
to the HTML class attribute, just to[br]make sure they wouldn't get confused.

0:01:52.205,0:01:56.613
So remember, if you want to set[br]the class attribute of an element,

0:01:56.613,0:02:00.333
you say dot className equals.

0:02:00.333,0:02:04.383
Now to assign that to each[br]of the animal names,

0:02:04.383,0:02:06.657
we can put it inside the loop, so:

0:02:06.657,0:02:13.449
`nameEls[i].className = "catColors";`

0:02:13.449,0:02:19.427
That will add the class name,[br]but actually it will remove any classes

0:02:19.427,0:02:23.704
that were there before,[br]because we said equals.

0:02:23.704,0:02:28.236
So if we had any classes there before,[br]those are now gone.

0:02:28.236,0:02:32.053
Now, they did have classes before,[br]class equals animal.

0:02:32.053,0:02:34.340
And so that's become catColors.

0:02:34.340,0:02:41.305
So what we really want to do, is add[br]a new class name to this class attribute.

0:02:41.305,0:02:47.562
And we can do that by saying[br]plus equals space catColors.

0:02:47.562,0:02:48.828
There we go.

0:02:48.828,0:02:52.044
So that's the safe thing to do,[br]because it will take

0:02:52.044,0:02:58.048
whatever the previous class was,[br]add a space and then the new class to it.

0:02:58.048,0:03:02.209
There is another way to do this[br]in newer browsers,

0:03:02.209,0:03:04.975
using the `classList` property.

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

0:03:15.035,0:03:19.649
Now that's a lot nicer, [br]but doesn't work everywhere.

0:03:19.649,0:03:24.014
So if you do want to use that,[br]you have to go to caniuse.com,

0:03:24.014,0:03:26.532
and make sure it's supported[br]in all the browsers

0:03:26.532,0:03:28.756
that you want your webpage to work in.

0:03:28.756,0:03:32.189
It is a lot nicer, but it's not nice[br]if your webpage breaks

0:03:32.189,0:03:36.254
because you're using a function[br]that the browser doesn't know about.

0:03:36.254,0:03:38.143
So I'll just comment it out.

0:03:38.143,0:03:41.337
Because I want mine working[br]in a lot of browsers.

0:03:41.337,0:03:46.067
There are still lots of times when we[br]want to change individual styles,

0:03:46.067,0:03:48.558
instead of assigning class names.

0:03:48.558,0:03:54.463
So once again, just remember that you have[br]both of these tools in your toolbox,

0:03:54.463,0:03:59.083
and think about what might be best[br]depending on the situation.