1
00:00:00,702 --> 00:00:05,963
In the last talk-through, I showed how
to set styles in JavaScript, like this.

2
00:00:05,963 --> 00:00:10,202
Now, if you set a lot of styles
in JavaScript, you could end up

3
00:00:10,202 --> 00:00:14,671
with hundreds of lines of code
just setting CSS property values.

4
00:00:14,671 --> 00:00:18,076
And that can really
clutter up your JavaScript.

5
00:00:18,076 --> 00:00:20,666
There's another way we could do this.

6
00:00:20,666 --> 00:00:23,213
We could create a CSS class,


7
00:00:23,213 --> 00:00:28,275
and add a CSS rule for that class
with the new styles that we want,

8
00:00:28,275 --> 00:00:33,116
and then dynamically
add that class name in JavaScript.

9
00:00:33,116 --> 00:00:38,932
Let's start up here at the `` tag 
and try this out.

10
00:00:38,932 --> 00:00:45,798
We'll make a `.catcolors` class,
and the CSS rule for it.

11
00:00:45,798 --> 00:00:53,085
And it will have `color: orange`,
and `background-color: black`.

12
00:00:53,085 --> 00:00:58,854
Now to assign that to the
`heading` element, we can say:

13
00:00:58,854 --> 00:01:05,813
`headingEl.className = "catcolors";

14
00:01:05,813 --> 00:01:09,485
And we can delete
the assignment of the color

15
00:01:09,485 --> 00:01:12,222
and background color in JavaScript.

16
00:01:12,222 --> 00:01:13,322
Ta-da!

17
00:01:13,322 --> 00:01:15,113
So that worked.

18
00:01:15,113 --> 00:01:17,466
Now, notice something weird?

19
00:01:17,466 --> 00:01:21,249
The HTML attribute
for class names is just `class`.

20
00:01:21,249 --> 00:01:26,779
If I had done this in HTML,
it would have been `class="catcolors"`.

21
00:01:26,779 --> 00:01:31,589
But when I did it in JavaScript,
I had to say `.className`,

22
00:01:31,589 --> 00:01:33,806
which is not what we're used to.

23
00:01:33,806 --> 00:01:39,084
And that is because `class` is actually
a keyword in the JavaScript language

24
00:01:39,084 --> 00:01:42,613
which has a special meaning
for the language.

25
00:01:42,613 --> 00:01:47,534
So because of that, browsers decided
to use `className` to refer

26
00:01:47,534 --> 00:01:52,205
to the HTML class attribute, just to
make sure they wouldn't get confused.

27
00:01:52,205 --> 00:01:56,613
So remember, if you want to set
the class attribute of an element,

28
00:01:56,613 --> 00:02:00,333
you say dot className equals.

29
00:02:00,333 --> 00:02:04,383
Now to assign that to each
of the animal names,

30
00:02:04,383 --> 00:02:06,657
we can put it inside the loop, so:

31
00:02:06,657 --> 00:02:13,449
`nameEls[i].className = "catColors";`

32
00:02:13,449 --> 00:02:19,427
That will add the class name,
but actually it will remove any classes

33
00:02:19,427 --> 00:02:23,704
that were there before,
because we said equals.

34
00:02:23,704 --> 00:02:28,236
So if we had any classes there before,
those are now gone.

35
00:02:28,236 --> 00:02:32,053
Now, they did have classes before,
class equals animal.

36
00:02:32,053 --> 00:02:34,340
And so that's become catColors.

37
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.

38
00:02:41,305 --> 00:02:47,562
And we can do that by saying
plus equals space catColors.

39
00:02:47,562 --> 00:02:48,828
There we go.

40
00:02:48,828 --> 00:02:52,044
So that's the safe thing to do,
because it will take

41
00:02:52,044 --> 00:02:58,048
whatever the previous class was,
add a space and then the new class to it.

42
00:02:58,048 --> 00:03:02,209
There is another way to do this
in newer browsers,

43
00:03:02,209 --> 00:03:04,975
using the `classList` property.

44
00:03:04,975 --> 00:03:15,035
So to do that, we say:
`nameEls[i].classList.add("catcolors");`.

45
00:03:15,035 --> 00:03:19,649
Now that's a lot nicer, 
but doesn't work everywhere.

46
00:03:19,649 --> 00:03:24,014
So if you do want to use that,
you have to go to caniuse.com,

47
00:03:24,014 --> 00:03:26,532
and make sure it's supported
in all the browsers

48
00:03:26,532 --> 00:03:28,756
that you want your webpage to work in.

49
00:03:28,756 --> 00:03:32,189
It is a lot nicer, but it's not nice
if your webpage breaks

50
00:03:32,189 --> 00:03:36,254
because you're using a function
that the browser doesn't know about.

51
00:03:36,254 --> 00:03:38,143
So I'll just comment it out.

52
00:03:38,143 --> 00:03:41,337
Because I want mine working
in a lot of browsers.

53
00:03:41,337 --> 00:03:46,067
There are still lots of times when we
want to change individual styles,

54
00:03:46,067 --> 00:03:48,558
instead of assigning class names.

55
00:03:48,558 --> 00:03:54,463
So once again, just remember that you have
both of these tools in your toolbox,

56
00:03:54,463 --> 00:03:59,083
and think about what might be best
depending on the situation.