[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.13,0:00:04.04,Default,,0000,0000,0000,,Agora você sabe como mudar \No conteúdo de uma elemento
Dialogue: 0,0:00:04.05,0:00:06.44,Default,,0000,0000,0000,,e os valores de seus atributos.
Dialogue: 0,0:00:06.44,0:00:11.38,Default,,0000,0000,0000,,O que mais falta? Bem, e se\Nquisermos mudar o estilo?
Dialogue: 0,0:00:11.38,0:00:14.31,Default,,0000,0000,0000,,Normalmente, faríamos isso no CSS,
Dialogue: 0,0:00:14.31,0:00:17.19,Default,,0000,0000,0000,,mas existem vezes que queremos \Nfazer isso no JavaScript,
Dialogue: 0,0:00:17.19,0:00:20.05,Default,,0000,0000,0000,,como quando animamos \Nestilos ao longo do tempo, ou
Dialogue: 0,0:00:20.05,0:00:22.79,Default,,0000,0000,0000,,muda-los após o usuário clicar em algo,\N
Dialogue: 0,0:00:23.22,0:00:25.57,Default,,0000,0000,0000,,que veremos como fazer isso \Nem breve, eu prometo.
Dialogue: 0,0:00:26.23,0:00:29.32,Default,,0000,0000,0000,,Vamos mudar o estilo do cabeçalho.
Dialogue: 0,0:00:29.75,0:00:33.42,Default,,0000,0000,0000,,Se fizermos isso no CSS,\Nse pareceria com isso
Dialogue: 0,0:00:33.42,0:00:38.55,Default,,0000,0000,0000,,{\i1}#heading{\i0} para selecionar por ID.\NDepois, digamos, {\i1}color:orange{\i0}
Dialogue: 0,0:00:38.55,0:00:42.05,Default,,0000,0000,0000,,Laranja, igual ao gato.
Dialogue: 0,0:00:42.48,0:00:46.04,Default,,0000,0000,0000,,Agora para fazer isso em JavaScript,
Dialogue: 0,0:00:46.04,0:00:49.93,Default,,0000,0000,0000,,primeiro temos que achar o elemento \N{\i1}heading{\i0}, que nós temos aqui.
Dialogue: 0,0:00:49.93,0:00:55.66,Default,,0000,0000,0000,,Então, temos que acessar o atributo\N{\i1}style{\i0}, com {\i1} ponto style{\i0}.
Dialogue: 0,0:00:55.66,0:01:00.92,Default,,0000,0000,0000,,Depois, acessamos a propriedade\Nna qual estamos interessados: {\i1}color{\i0}
Dialogue: 0,0:01:00.92,0:01:04.62,Default,,0000,0000,0000,,e deixar igual ao novo valor.
Dialogue: 0,0:01:04.62,0:01:08.62,Default,,0000,0000,0000,,Vamos deletar a propriedade \Nno CSS para ver se funcionou.
Dialogue: 0,0:01:08.62,0:01:09.100,Default,,0000,0000,0000,,Sim, funcionou.
Dialogue: 0,0:01:11.62,0:01:14.78,Default,,0000,0000,0000,,Veja que aqui embaixo temos dois pontos
Dialogue: 0,0:01:14.78,0:01:17.95,Default,,0000,0000,0000,,porque estamos na verdade \Nacessando dois objetos.
Dialogue: 0,0:01:17.95,0:01:22.24,Default,,0000,0000,0000,,um deles é o objeto {\i1}element{\i0}, \Ne outro é o objeto {\i1}style{\i0}
Dialogue: 0,0:01:22.24,0:01:26.63,Default,,0000,0000,0000,,que contém todos os estilos para aquele\Nelemento como propriedades diferentes.
Dialogue: 0,0:01:27.00,0:01:31.30,Default,,0000,0000,0000,,E se nós também quiséssemos \Nmudar a cor de fundo do cabeçalho?
Dialogue: 0,0:01:31.63,0:01:37.18,Default,,0000,0000,0000,,em CSS seria: {\i1}background-color: black;{\i0}
Dialogue: 0,0:01:37.55,0:01:40.31,Default,,0000,0000,0000,,Vamos tentar em JavaScript.
Dialogue: 0,0:01:40.100,0:01:49.08,Default,,0000,0000,0000,,Ficaria: {\i1}headingEl.style.background-color é igual à black{\i0}
Dialogue: 0,0:01:49.38,0:01:53.92,Default,,0000,0000,0000,,Temos um erro. Na verdade esse \Né um comando JavaScript inválido
Dialogue: 0,0:01:53.92,0:01:57.41,Default,,0000,0000,0000,,porque nomes de propriedades \Nnão podem conter hifens
Dialogue: 0,0:01:57.41,0:02:00.90,Default,,0000,0000,0000,,Ao invés disso, precisamos converter \No nome dessa propriedade CSS
Dialogue: 0,0:02:00.90,0:02:05.98,Default,,0000,0000,0000,,em uma forma válida no JavaScript, que\Nfazemos mudando o nome da variável.
Dialogue: 0,0:02:06.78,0:02:10.26,Default,,0000,0000,0000,,Removemos o hífen e deixamos o C maiúsculo.
Dialogue: 0,0:02:11.10,0:02:16.47,Default,,0000,0000,0000,,Vamos testar deletando essa \Npropriedade aqui e, sim, continua preto.
Dialogue: 0,0:02:16.82,0:02:21.84,Default,,0000,0000,0000,,Agora que estou deixando "sofisticado", \Nquero alinhar o cabeçalho central também
Dialogue: 0,0:02:21.84,0:02:26.28,Default,,0000,0000,0000,,Então vou adicionar mais\Numa linha aqui embaixo
Dialogue: 0,0:02:26.91,0:02:33.33,Default,,0000,0000,0000,,{\i1}headingEl.style.textAlign{\i0}\Né igual à {\i1}center{\i0}.
Dialogue: 0,0:02:33.79,0:02:37.92,Default,,0000,0000,0000,,Mais uma vez, nós reescrevemos já que \Neram duas palavras com hífens
Dialogue: 0,0:02:37.92,0:02:41.68,Default,,0000,0000,0000,,e agora temos esse cabeçalho que \Nse parece com nosso gato
Dialogue: 0,0:02:41.68,0:02:43.64,Default,,0000,0000,0000,,e também com Hallowen.
Dialogue: 0,0:02:44.54,0:02:46.00,Default,,0000,0000,0000,,[Legendado por: Valter Bigeli]\N[Revisado por: Pablo Vieira]