0:00:01.130,0:00:04.040
Agora você sabe como mudar [br]o conteúdo de uma elemento

0:00:04.051,0:00:06.441
e os valores de seus atributos.

0:00:06.441,0:00:11.383
O que mais falta? Bem, e se[br]quisermos mudar o estilo?

0:00:11.383,0:00:14.314
Normalmente, faríamos isso no CSS,

0:00:14.314,0:00:17.190
mas existem vezes que queremos [br]fazer isso no JavaScript,

0:00:17.190,0:00:20.046
como quando animamos [br]estilos ao longo do tempo, ou

0:00:20.046,0:00:22.786
muda-los após o usuário clicar em algo,[br]

0:00:23.216,0:00:25.566
que veremos como fazer isso [br]em breve, eu prometo.

0:00:26.226,0:00:29.317
Vamos mudar o estilo do cabeçalho.

0:00:29.747,0:00:33.415
Se fizermos isso no CSS,[br]se pareceria com isso

0:00:33.415,0:00:38.549
<i>#heading</i> para selecionar por ID.[br]Depois, digamos, <i>color:orange</i>

0:00:38.549,0:00:42.046
Laranja, igual ao gato.

0:00:42.476,0:00:46.036
Agora para fazer isso em JavaScript,

0:00:46.036,0:00:49.932
primeiro temos que achar o elemento [br]<i>heading</i>, que nós temos aqui.

0:00:49.932,0:00:55.655
Então, temos que acessar o atributo[br]<i>style</i>, com <i> ponto style</i>.

0:00:55.655,0:01:00.916
Depois, acessamos a propriedade[br]na qual estamos interessados: <i>color</i>

0:01:00.916,0:01:04.617
e deixar igual ao novo valor.

0:01:04.617,0:01:08.617
Vamos deletar a propriedade [br]no CSS para ver se funcionou.

0:01:08.617,0:01:09.997
Sim, funcionou.

0:01:11.617,0:01:14.778
Veja que aqui embaixo temos dois pontos

0:01:14.778,0:01:17.950
porque estamos na verdade [br]acessando dois objetos.

0:01:17.950,0:01:22.242
um deles é o objeto <i>element</i>, [br]e outro é o objeto <i>style</i>

0:01:22.242,0:01:26.634
que contém todos os estilos para aquele[br]elemento como propriedades diferentes.

0:01:27.004,0:01:31.302
E se nós também quiséssemos [br]mudar a cor de fundo do cabeçalho?

0:01:31.632,0:01:37.178
em CSS seria: <i>background-color: black;</i>

0:01:37.548,0:01:40.306
Vamos tentar em JavaScript.

0:01:40.996,0:01:49.078
Ficaria: <i>headingEl.style.background-color é igual à black</i>

0:01:49.378,0:01:53.917
Temos um erro. Na verdade esse [br]é um comando JavaScript inválido

0:01:53.917,0:01:57.412
porque nomes de propriedades [br]não podem conter hifens

0:01:57.412,0:02:00.896
Ao invés disso, precisamos converter [br]o nome dessa propriedade CSS

0:02:00.896,0:02:05.980
em uma forma válida no JavaScript, que[br]fazemos mudando o nome da variável.

0:02:06.780,0:02:10.264
Removemos o hífen e deixamos o C maiúsculo.

0:02:11.104,0:02:16.469
Vamos testar deletando essa [br]propriedade aqui e, sim, continua preto.

0:02:16.819,0:02:21.838
Agora que estou deixando "sofisticado", [br]quero alinhar o cabeçalho central também

0:02:21.838,0:02:26.280
Então vou adicionar mais[br]uma linha aqui embaixo

0:02:26.910,0:02:33.330
<i>headingEl.style.textAlign</i>[br]é igual à <i>center</i>.

0:02:33.790,0:02:37.916
Mais uma vez, nós reescrevemos já que [br]eram duas palavras com hífens

0:02:37.916,0:02:41.680
e agora temos esse cabeçalho que [br]se parece com nosso gato

0:02:41.680,0:02:43.644
e também com Hallowen.

0:02:44.544,0:02:46.000
[Legendado por: Valter Bigeli][br][Revisado por: Pablo Vieira]