[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:04.04,Default,,0000,0000,0000,,Okay, now you know how to change \Nthe contents of an element
Dialogue: 0,0:00:04.05,0:00:06.44,Default,,0000,0000,0000,,and the values of its attributes.
Dialogue: 0,0:00:06.44,0:00:11.38,Default,,0000,0000,0000,,What else is left? Well, what if \Nwe wanted to change its style?
Dialogue: 0,0:00:11.38,0:00:15.53,Default,,0000,0000,0000,,Normally, we would do that in CSS, \Nbut there are some times when we
Dialogue: 0,0:00:15.53,0:00:20.43,Default,,0000,0000,0000,,want to do that in JavaScript, like when\Nwe want to animate styles over time or
Dialogue: 0,0:00:20.43,0:00:25.94,Default,,0000,0000,0000,,change them after a user clicks something, \Nwhich we'll see how to do soon, I promise.
Dialogue: 0,0:00:25.94,0:00:29.75,Default,,0000,0000,0000,,Let's change the style of this heading.
Dialogue: 0,0:00:29.75,0:00:33.42,Default,,0000,0000,0000,,If we did that in CSS, \Nit would look like this--
Dialogue: 0,0:00:33.42,0:00:38.55,Default,,0000,0000,0000,,`#heading` to select by ID,\Nand then we'll say `color: orange`.
Dialogue: 0,0:00:38.55,0:00:42.48,Default,,0000,0000,0000,,Ta da, it's orange, just like the cat.
Dialogue: 0,0:00:42.48,0:00:46.04,Default,,0000,0000,0000,,Now, to do that in JavaScript,
Dialogue: 0,0:00:46.04,0:00:49.93,Default,,0000,0000,0000,,we first find the heading element, \Nwhich we have here.
Dialogue: 0,0:00:49.93,0:00:55.66,Default,,0000,0000,0000,,Then, we're going to access \Nits style attribute with `.style`.
Dialogue: 0,0:00:55.66,0:01:00.92,Default,,0000,0000,0000,,Then, we access the property \Nthat we're interested in-- `color`--
Dialogue: 0,0:01:00.92,0:01:04.62,Default,,0000,0000,0000,,and set it equal to the new value.
Dialogue: 0,0:01:04.62,0:01:11.34,Default,,0000,0000,0000,,Let's delete the property in CSS to \Nsee if it worked. Yup, it worked.
Dialogue: 0,0:01:11.34,0:01:16.62,Default,,0000,0000,0000,,Now, notice down here we've got two dots\Nbecause we're actually accessing
Dialogue: 0,0:01:16.62,0:01:22.12,Default,,0000,0000,0000,,two objects. One of them is the element\Nobject and the other is the style object
Dialogue: 0,0:01:22.12,0:01:27.00,Default,,0000,0000,0000,,that contains all the styles for that \Nelement as different properties.
Dialogue: 0,0:01:27.00,0:01:31.63,Default,,0000,0000,0000,,What if we also wanted to change the\Nbackground color of that heading?
Dialogue: 0,0:01:31.63,0:01:37.55,Default,,0000,0000,0000,,In CSS it would be \N`background-color: black;`
Dialogue: 0,0:01:37.55,0:01:40.100,Default,,0000,0000,0000,,Let's try that in JavaScript. So
Dialogue: 0,0:01:40.100,0:01:49.38,Default,,0000,0000,0000,,`headingEl.style.background-color \N= "black";`
Dialogue: 0,0:01:49.38,0:01:53.98,Default,,0000,0000,0000,,Uh oh, we have an error. \NThis is actually invalid JavaScript,
Dialogue: 0,0:01:53.98,0:01:57.41,Default,,0000,0000,0000,,because property names \Ncan't contain hyphens.
Dialogue: 0,0:01:57.41,0:02:02.37,Default,,0000,0000,0000,,Instead we need to convert this CSS\Nproperty name to a form that's valid
Dialogue: 0,0:02:02.37,0:02:11.10,Default,,0000,0000,0000,,JavaScript, which we do by camel-casing it.\NRemove the hyphen and capitalize the "c".
Dialogue: 0,0:02:11.10,0:02:16.97,Default,,0000,0000,0000,,And let's go test it out by deleting this property here, and yep, it's still black.
Dialogue: 0,0:02:16.97,0:02:21.84,Default,,0000,0000,0000,,Now that I'm getting fancy, I want \Nto make the heading center aligned too.
Dialogue: 0,0:02:21.84,0:02:26.91,Default,,0000,0000,0000,,So I will add one more line down here.
Dialogue: 0,0:02:26.91,0:02:33.79,Default,,0000,0000,0000,,`headingEl.style.textAlign`-- \Nwhich we camel-case-- `= "center"`.
Dialogue: 0,0:02:33.79,0:02:37.92,Default,,0000,0000,0000,,Once again, we camel-case it since it \Nwas two words with a hyphen before,
Dialogue: 0,0:02:37.92,0:02:45.30,Default,,0000,0000,0000,,and now we've got this heading that looks\Nlike our cat and also like Halloween. Yay.