[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.70,0:00:05.96,Default,,0000,0000,0000,,In the last talk-through, I showed how\Nto set styles in JavaScript, like this.
Dialogue: 0,0:00:05.96,0:00:10.20,Default,,0000,0000,0000,,Now, if you set a lot of styles\Nin JavaScript, you could end up
Dialogue: 0,0:00:10.20,0:00:14.67,Default,,0000,0000,0000,,with hundreds of lines of code\Njust setting CSS property values.
Dialogue: 0,0:00:14.67,0:00:18.08,Default,,0000,0000,0000,,And that can really\Nclutter up your JavaScript.
Dialogue: 0,0:00:18.08,0:00:20.67,Default,,0000,0000,0000,,There's another way we could do this.
Dialogue: 0,0:00:20.67,0:00:23.21,Default,,0000,0000,0000,,We could create a CSS class,\N
Dialogue: 0,0:00:23.21,0:00:28.28,Default,,0000,0000,0000,,and add a CSS rule for that class\Nwith the new styles that we want,
Dialogue: 0,0:00:28.28,0:00:33.12,Default,,0000,0000,0000,,and then dynamically\Nadd that class name in JavaScript.
Dialogue: 0,0:00:33.12,0:00:38.93,Default,,0000,0000,0000,,Let's start up here at the `` tag \Nand try this out.
Dialogue: 0,0:00:38.93,0:00:45.80,Default,,0000,0000,0000,,We'll make a `.catcolors` class,\Nand the CSS rule for it.
Dialogue: 0,0:00:45.80,0:00:53.08,Default,,0000,0000,0000,,And it will have `color: orange`,\Nand `background-color: black`.
Dialogue: 0,0:00:53.08,0:00:58.85,Default,,0000,0000,0000,,Now to assign that to the\N`heading` element, we can say:
Dialogue: 0,0:00:58.85,0:01:05.81,Default,,0000,0000,0000,,`headingEl.className = "catcolors";
Dialogue: 0,0:01:05.81,0:01:09.48,Default,,0000,0000,0000,,And we can delete\Nthe assignment of the color
Dialogue: 0,0:01:09.48,0:01:12.22,Default,,0000,0000,0000,,and background color in JavaScript.
Dialogue: 0,0:01:12.22,0:01:13.32,Default,,0000,0000,0000,,Ta-da!
Dialogue: 0,0:01:13.32,0:01:15.11,Default,,0000,0000,0000,,So that worked.
Dialogue: 0,0:01:15.11,0:01:17.47,Default,,0000,0000,0000,,Now, notice something weird?
Dialogue: 0,0:01:17.47,0:01:21.25,Default,,0000,0000,0000,,The HTML attribute\Nfor class names is just `class`.
Dialogue: 0,0:01:21.25,0:01:26.78,Default,,0000,0000,0000,,If I had done this in HTML,\Nit would have been `class="catcolors"`.
Dialogue: 0,0:01:26.78,0:01:31.59,Default,,0000,0000,0000,,But when I did it in JavaScript,\NI had to say `.className`,
Dialogue: 0,0:01:31.59,0:01:33.81,Default,,0000,0000,0000,,which is not what we're used to.
Dialogue: 0,0:01:33.81,0:01:39.08,Default,,0000,0000,0000,,And that is because `class` is actually\Na keyword in the JavaScript language
Dialogue: 0,0:01:39.08,0:01:42.61,Default,,0000,0000,0000,,which has a special meaning\Nfor the language.
Dialogue: 0,0:01:42.61,0:01:47.53,Default,,0000,0000,0000,,So because of that, browsers decided\Nto use `className` to refer
Dialogue: 0,0:01:47.53,0:01:52.20,Default,,0000,0000,0000,,to the HTML class attribute, just to\Nmake sure they wouldn't get confused.
Dialogue: 0,0:01:52.20,0:01:56.61,Default,,0000,0000,0000,,So remember, if you want to set\Nthe class attribute of an element,
Dialogue: 0,0:01:56.61,0:02:00.33,Default,,0000,0000,0000,,you say dot className equals.
Dialogue: 0,0:02:00.33,0:02:04.38,Default,,0000,0000,0000,,Now to assign that to each\Nof the animal names,
Dialogue: 0,0:02:04.38,0:02:06.66,Default,,0000,0000,0000,,we can put it inside the loop, so:
Dialogue: 0,0:02:06.66,0:02:13.45,Default,,0000,0000,0000,,`nameEls[i].className = "catColors";`
Dialogue: 0,0:02:13.45,0:02:19.43,Default,,0000,0000,0000,,That will add the class name,\Nbut actually it will remove any classes
Dialogue: 0,0:02:19.43,0:02:23.70,Default,,0000,0000,0000,,that were there before,\Nbecause we said equals.
Dialogue: 0,0:02:23.70,0:02:28.24,Default,,0000,0000,0000,,So if we had any classes there before,\Nthose are now gone.
Dialogue: 0,0:02:28.24,0:02:32.05,Default,,0000,0000,0000,,Now, they did have classes before,\Nclass equals animal.
Dialogue: 0,0:02:32.05,0:02:34.34,Default,,0000,0000,0000,,And so that's become catColors.
Dialogue: 0,0:02:34.34,0:02:41.30,Default,,0000,0000,0000,,So what we really want to do, is add\Na new class name to this class attribute.
Dialogue: 0,0:02:41.30,0:02:47.56,Default,,0000,0000,0000,,And we can do that by saying\Nplus equals space catColors.
Dialogue: 0,0:02:47.56,0:02:48.83,Default,,0000,0000,0000,,There we go.
Dialogue: 0,0:02:48.83,0:02:52.04,Default,,0000,0000,0000,,So that's the safe thing to do,\Nbecause it will take
Dialogue: 0,0:02:52.04,0:02:58.05,Default,,0000,0000,0000,,whatever the previous class was,\Nadd a space and then the new class to it.
Dialogue: 0,0:02:58.05,0:03:02.21,Default,,0000,0000,0000,,There is another way to do this\Nin newer browsers,
Dialogue: 0,0:03:02.21,0:03:04.98,Default,,0000,0000,0000,,using the `classList` property.
Dialogue: 0,0:03:04.98,0:03:15.04,Default,,0000,0000,0000,,So to do that, we say:\N`nameEls[i].classList.add("catcolors");`.
Dialogue: 0,0:03:15.04,0:03:19.65,Default,,0000,0000,0000,,Now that's a lot nicer, \Nbut doesn't work everywhere.
Dialogue: 0,0:03:19.65,0:03:24.01,Default,,0000,0000,0000,,So if you do want to use that,\Nyou have to go to caniuse.com,
Dialogue: 0,0:03:24.01,0:03:26.53,Default,,0000,0000,0000,,and make sure it's supported\Nin all the browsers
Dialogue: 0,0:03:26.53,0:03:28.76,Default,,0000,0000,0000,,that you want your webpage to work in.
Dialogue: 0,0:03:28.76,0:03:32.19,Default,,0000,0000,0000,,It is a lot nicer, but it's not nice\Nif your webpage breaks
Dialogue: 0,0:03:32.19,0:03:36.25,Default,,0000,0000,0000,,because you're using a function\Nthat the browser doesn't know about.
Dialogue: 0,0:03:36.25,0:03:38.14,Default,,0000,0000,0000,,So I'll just comment it out.
Dialogue: 0,0:03:38.14,0:03:41.34,Default,,0000,0000,0000,,Because I want mine working\Nin a lot of browsers.
Dialogue: 0,0:03:41.34,0:03:46.07,Default,,0000,0000,0000,,There are still lots of times when we\Nwant to change individual styles,
Dialogue: 0,0:03:46.07,0:03:48.56,Default,,0000,0000,0000,,instead of assigning class names.
Dialogue: 0,0:03:48.56,0:03:54.46,Default,,0000,0000,0000,,So once again, just remember that you have\Nboth of these tools in your toolbox,
Dialogue: 0,0:03:54.46,0:03:59.08,Default,,0000,0000,0000,,and think about what might be best\Ndepending on the situation.