1
00:00:01,130 --> 00:00:04,040
Agora você sabe como mudar 
o conteúdo de uma elemento

2
00:00:04,051 --> 00:00:06,441
e os valores de seus atributos.

3
00:00:06,441 --> 00:00:11,383
O que mais falta? Bem, e se
quisermos mudar o estilo?

4
00:00:11,383 --> 00:00:14,314
Normalmente, faríamos isso no CSS,

5
00:00:14,314 --> 00:00:17,190
mas existem vezes que queremos 
fazer isso no JavaScript,

6
00:00:17,190 --> 00:00:20,046
como quando animamos 
estilos ao longo do tempo, ou

7
00:00:20,046 --> 00:00:22,786
muda-los após o usuário clicar em algo,


8
00:00:23,216 --> 00:00:25,566
que veremos como fazer isso 
em breve, eu prometo.

9
00:00:26,226 --> 00:00:29,317
Vamos mudar o estilo do cabeçalho.

10
00:00:29,747 --> 00:00:33,415
Se fizermos isso no CSS,
se pareceria com isso

11
00:00:33,415 --> 00:00:38,549
<i>#heading</i> para selecionar por ID.
Depois, digamos, <i>color:orange</i>

12
00:00:38,549 --> 00:00:42,046
Laranja, igual ao gato.

13
00:00:42,476 --> 00:00:46,036
Agora para fazer isso em JavaScript,

14
00:00:46,036 --> 00:00:49,932
primeiro temos que achar o elemento 
<i>heading</i>, que nós temos aqui.

15
00:00:49,932 --> 00:00:55,655
Então, temos que acessar o atributo
<i>style</i>, com <i> ponto style</i>.

16
00:00:55,655 --> 00:01:00,916
Depois, acessamos a propriedade
na qual estamos interessados: <i>color</i>

17
00:01:00,916 --> 00:01:04,617
e deixar igual ao novo valor.

18
00:01:04,617 --> 00:01:08,617
Vamos deletar a propriedade 
no CSS para ver se funcionou.

19
00:01:08,617 --> 00:01:09,997
Sim, funcionou.

20
00:01:11,617 --> 00:01:14,778
Veja que aqui embaixo temos dois pontos

21
00:01:14,778 --> 00:01:17,950
porque estamos na verdade 
acessando dois objetos.

22
00:01:17,950 --> 00:01:22,242
um deles é o objeto <i>element</i>, 
e outro é o objeto <i>style</i>

23
00:01:22,242 --> 00:01:26,634
que contém todos os estilos para aquele
elemento como propriedades diferentes.

24
00:01:27,004 --> 00:01:31,302
E se nós também quiséssemos 
mudar a cor de fundo do cabeçalho?

25
00:01:31,632 --> 00:01:37,178
em CSS seria: <i>background-color: black;</i>

26
00:01:37,548 --> 00:01:40,306
Vamos tentar em JavaScript.

27
00:01:40,996 --> 00:01:49,078
Ficaria: <i>headingEl.style.background-color é igual à black</i>

28
00:01:49,378 --> 00:01:53,917
Temos um erro. Na verdade esse 
é um comando JavaScript inválido

29
00:01:53,917 --> 00:01:57,412
porque nomes de propriedades 
não podem conter hifens

30
00:01:57,412 --> 00:02:00,896
Ao invés disso, precisamos converter 
o nome dessa propriedade CSS

31
00:02:00,896 --> 00:02:05,980
em uma forma válida no JavaScript, que
fazemos mudando o nome da variável.

32
00:02:06,780 --> 00:02:10,264
Removemos o hífen e deixamos o C maiúsculo.

33
00:02:11,104 --> 00:02:16,469
Vamos testar deletando essa 
propriedade aqui e, sim, continua preto.

34
00:02:16,819 --> 00:02:21,838
Agora que estou deixando "sofisticado", 
quero alinhar o cabeçalho central também

35
00:02:21,838 --> 00:02:26,280
Então vou adicionar mais
uma linha aqui embaixo

36
00:02:26,910 --> 00:02:33,330
<i>headingEl.style.textAlign</i>
é igual à <i>center</i>.

37
00:02:33,790 --> 00:02:37,916
Mais uma vez, nós reescrevemos já que 
eram duas palavras com hífens

38
00:02:37,916 --> 00:02:41,680
e agora temos esse cabeçalho que 
se parece com nosso gato

39
00:02:41,680 --> 00:02:43,644
e também com Hallowen.

40
00:02:44,544 --> 00:02:46,000
[Legendado por: Valter Bigeli]
[Revisado por: Pablo Vieira]