1
00:00:00,000 --> 00:00:04,040
Okay, now you know how to change 
the contents of an element

2
00:00:04,051 --> 00:00:06,441
and the values of its attributes.

3
00:00:06,441 --> 00:00:11,383
What else is left? Well, what if 
we wanted to change its style?

4
00:00:11,383 --> 00:00:15,534
Normally, we would do that in CSS, 
but there are some times when we

5
00:00:15,534 --> 00:00:20,432
want to do that in JavaScript, like when
we want to animate styles over time or

6
00:00:20,432 --> 00:00:25,944
change them after a user clicks something, 
which we'll see how to do soon, I promise.

7
00:00:25,944 --> 00:00:29,747
Let's change the style of this heading.

8
00:00:29,747 --> 00:00:33,415
If we did that in CSS, 
it would look like this--

9
00:00:33,415 --> 00:00:38,549
`#heading` to select by ID,
and then we'll say `color: orange`.

10
00:00:38,549 --> 00:00:42,476
Ta da, it's orange, just like the cat.

11
00:00:42,476 --> 00:00:46,036
Now, to do that in JavaScript,

12
00:00:46,036 --> 00:00:49,932
we first find the heading element, 
which we have here.

13
00:00:49,932 --> 00:00:55,655
Then, we're going to access 
its style attribute with `.style`.

14
00:00:55,655 --> 00:01:00,916
Then, we access the property 
that we're interested in-- `color`--

15
00:01:00,916 --> 00:01:04,617
and set it equal to the new value.

16
00:01:04,617 --> 00:01:11,345
Let's delete the property in CSS to 
see if it worked. Yup, it worked.

17
00:01:11,345 --> 00:01:16,618
Now, notice down here we've got two dots
because we're actually accessing

18
00:01:16,618 --> 00:01:22,122
two objects. One of them is the element
object and the other is the style object

19
00:01:22,122 --> 00:01:27,004
that contains all the styles for that 
element as different properties.

20
00:01:27,004 --> 00:01:31,632
What if we also wanted to change the
background color of that heading?

21
00:01:31,632 --> 00:01:37,548
In CSS it would be 
`background-color: black;`

22
00:01:37,548 --> 00:01:40,996
Let's try that in JavaScript. So

23
00:01:40,996 --> 00:01:49,378
`headingEl.style.background-color 
= "black";`

24
00:01:49,378 --> 00:01:53,977
Uh oh, we have an error. 
This is actually invalid JavaScript,

25
00:01:53,977 --> 00:01:57,412
because property names 
can't contain hyphens.

26
00:01:57,412 --> 00:02:02,372
Instead we need to convert this CSS
property name to a form that's valid

27
00:02:02,372 --> 00:02:11,104
JavaScript, which we do by camel-casing it.
Remove the hyphen and capitalize the "c".

28
00:02:11,104 --> 00:02:16,969
And let's go test it out by deleting this property here, and yep, it's still black.

29
00:02:16,969 --> 00:02:21,838
Now that I'm getting fancy, I want 
to make the heading center aligned too.

30
00:02:21,838 --> 00:02:26,910
So I will add one more line down here.

31
00:02:26,910 --> 00:02:33,790
`headingEl.style.textAlign`-- 
which we camel-case-- `= "center"`.

32
00:02:33,790 --> 00:02:37,916
Once again, we camel-case it since it 
was two words with a hyphen before,

33
00:02:37,916 --> 00:02:45,298
and now we've got this heading that looks
like our cat and also like Halloween. Yay.