0:00:00.000,0:00:04.040
Okay, now you know how to change [br]the contents of an element

0:00:04.051,0:00:06.441
and the values of its attributes.

0:00:06.441,0:00:11.383
What else is left? Well, what if [br]we wanted to change its style?

0:00:11.383,0:00:15.534
Normally, we would do that in CSS, [br]but there are some times when we

0:00:15.534,0:00:20.432
want to do that in JavaScript, like when[br]we want to animate styles over time or

0:00:20.432,0:00:25.944
change them after a user clicks something, [br]which we'll see how to do soon, I promise.

0:00:25.944,0:00:29.747
Let's change the style of this heading.

0:00:29.747,0:00:33.415
If we did that in CSS, [br]it would look like this--

0:00:33.415,0:00:38.549
`#heading` to select by ID,[br]and then we'll say `color: orange`.

0:00:38.549,0:00:42.476
Ta da, it's orange, just like the cat.

0:00:42.476,0:00:46.036
Now, to do that in JavaScript,

0:00:46.036,0:00:49.932
we first find the heading element, [br]which we have here.

0:00:49.932,0:00:55.655
Then, we're going to access [br]its style attribute with `.style`.

0:00:55.655,0:01:00.916
Then, we access the property [br]that we're interested in-- `color`--

0:01:00.916,0:01:04.617
and set it equal to the new value.

0:01:04.617,0:01:11.345
Let's delete the property in CSS to [br]see if it worked. Yup, it worked.

0:01:11.345,0:01:16.618
Now, notice down here we've got two dots[br]because we're actually accessing

0:01:16.618,0:01:22.122
two objects. One of them is the element[br]object and the other is the style object

0:01:22.122,0:01:27.004
that contains all the styles for that [br]element as different properties.

0:01:27.004,0:01:31.632
What if we also wanted to change the[br]background color of that heading?

0:01:31.632,0:01:37.548
In CSS it would be [br]`background-color: black;`

0:01:37.548,0:01:40.996
Let's try that in JavaScript. So

0:01:40.996,0:01:49.378
`headingEl.style.background-color [br]= "black";`

0:01:49.378,0:01:53.977
Uh oh, we have an error. [br]This is actually invalid JavaScript,

0:01:53.977,0:01:57.412
because property names [br]can't contain hyphens.

0:01:57.412,0:02:02.372
Instead we need to convert this CSS[br]property name to a form that's valid

0:02:02.372,0:02:11.104
JavaScript, which we do by camel-casing it.[br]Remove the hyphen and capitalize the "c".

0:02:11.104,0:02:16.969
And let's go test it out by deleting this property here, and yep, it's still black.

0:02:16.969,0:02:21.838
Now that I'm getting fancy, I want [br]to make the heading center aligned too.

0:02:21.838,0:02:26.910
So I will add one more line down here.

0:02:26.910,0:02:33.790
`headingEl.style.textAlign`-- [br]which we camel-case-- `= "center"`.

0:02:33.790,0:02:37.916
Once again, we camel-case it since it [br]was two words with a hyphen before,

0:02:37.916,0:02:45.298
and now we've got this heading that looks[br]like our cat and also like Halloween. Yay.