WEBVTT

00:00:01.130 --> 00:00:04.040
Agora você sabe como mudar 
o conteúdo de uma elemento

00:00:04.051 --> 00:00:06.441
e os valores de seus atributos.

00:00:06.441 --> 00:00:11.383
O que mais falta? Bem, e se
quisermos mudar o estilo?

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

00:00:14.314 --> 00:00:17.190
mas existem vezes que queremos 
fazer isso no JavaScript,

00:00:17.190 --> 00:00:20.046
como quando animamos 
estilos ao longo do tempo, ou

00:00:20.046 --> 00:00:22.786
muda-los após o usuário clicar em algo,


00:00:23.216 --> 00:00:25.566
que veremos como fazer isso 
em breve, eu prometo.

00:00:26.226 --> 00:00:29.317
Vamos mudar o estilo do cabeçalho.

00:00:29.747 --> 00:00:33.415
Se fizermos isso no CSS,
se pareceria com isso

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

00:00:38.549 --> 00:00:42.046
Laranja, igual ao gato.

00:00:42.476 --> 00:00:46.036
Agora para fazer isso em JavaScript,

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

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

00:00:55.655 --> 00:01:00.916
Depois, acessamos a propriedade
na qual estamos interessados: <i>color</i>

00:01:00.916 --> 00:01:04.617
e deixar igual ao novo valor.

00:01:04.617 --> 00:01:08.617
Vamos deletar a propriedade 
no CSS para ver se funcionou.

00:01:08.617 --> 00:01:09.997
Sim, funcionou.

00:01:11.617 --> 00:01:14.778
Veja que aqui embaixo temos dois pontos

00:01:14.778 --> 00:01:17.950
porque estamos na verdade 
acessando dois objetos.

00:01:17.950 --> 00:01:22.242
um deles é o objeto <i>element</i>, 
e outro é o objeto <i>style</i>

00:01:22.242 --> 00:01:26.634
que contém todos os estilos para aquele
elemento como propriedades diferentes.

00:01:27.004 --> 00:01:31.302
E se nós também quiséssemos 
mudar a cor de fundo do cabeçalho?

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

00:01:37.548 --> 00:01:40.306
Vamos tentar em JavaScript.

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

00:01:49.378 --> 00:01:53.917
Temos um erro. Na verdade esse 
é um comando JavaScript inválido

00:01:53.917 --> 00:01:57.412
porque nomes de propriedades 
não podem conter hifens

00:01:57.412 --> 00:02:00.896
Ao invés disso, precisamos converter 
o nome dessa propriedade CSS

00:02:00.896 --> 00:02:05.980
em uma forma válida no JavaScript, que
fazemos mudando o nome da variável.

00:02:06.780 --> 00:02:10.264
Removemos o hífen e deixamos o C maiúsculo.

00:02:11.104 --> 00:02:16.469
Vamos testar deletando essa 
propriedade aqui e, sim, continua preto.

00:02:16.819 --> 00:02:21.838
Agora que estou deixando "sofisticado", 
quero alinhar o cabeçalho central também

00:02:21.838 --> 00:02:26.280
Então vou adicionar mais
uma linha aqui embaixo

00:02:26.910 --> 00:02:33.330
<i>headingEl.style.textAlign</i>
é igual à <i>center</i>.

00:02:33.790 --> 00:02:37.916
Mais uma vez, nós reescrevemos já que 
eram duas palavras com hífens

00:02:37.916 --> 00:02:41.680
e agora temos esse cabeçalho que 
se parece com nosso gato

00:02:41.680 --> 00:02:43.644
e também com Hallowen.

00:02:44.544 --> 00:02:46.000
[Legendado por: Valter Bigeli]
[Revisado por: Pablo Vieira]