-
Agora você sabe como mudar
o conteúdo de uma elemento
-
e os valores de seus atributos.
-
O que mais falta? Bem, e se
quisermos mudar o estilo?
-
Normalmente, faríamos isso no CSS,
-
mas existem vezes que queremos
fazer isso no JavaScript,
-
como quando animamos
estilos ao longo do tempo, ou
-
muda-los após o usuário clicar em algo,
-
que veremos como fazer isso
em breve, eu prometo.
-
Vamos mudar o estilo do cabeçalho.
-
Se fizermos isso no CSS,
se pareceria com isso
-
#heading para selecionar por ID.
Depois, digamos, color:orange
-
Laranja, igual ao gato.
-
Agora para fazer isso em JavaScript,
-
primeiro temos que achar o elemento
heading, que nós temos aqui.
-
Então, temos que acessar o atributo
style, com ponto style.
-
Depois, acessamos a propriedade
na qual estamos interessados: color
-
e deixar igual ao novo valor.
-
Vamos deletar a propriedade
no CSS para ver se funcionou.
-
Sim, funcionou.
-
Veja que aqui embaixo temos dois pontos
-
porque estamos na verdade
acessando dois objetos.
-
um deles é o objeto element,
e outro é o objeto style
-
que contém todos os estilos para aquele
elemento como propriedades diferentes.
-
E se nós também quiséssemos
mudar a cor de fundo do cabeçalho?
-
em CSS seria: background-color: black;
-
Vamos tentar em JavaScript.
-
Ficaria: headingEl.style.background-color é igual à black
-
Temos um erro. Na verdade esse
é um comando JavaScript inválido
-
porque nomes de propriedades
não podem conter hifens
-
Ao invés disso, precisamos converter
o nome dessa propriedade CSS
-
em uma forma válida no JavaScript, que
fazemos mudando o nome da variável.
-
Removemos o hífen e deixamos o C maiúsculo.
-
Vamos testar deletando essa
propriedade aqui e, sim, continua preto.
-
Agora que estou deixando "sofisticado",
quero alinhar o cabeçalho central também
-
Então vou adicionar mais
uma linha aqui embaixo
-
headingEl.style.textAlign
é igual à center.
-
Mais uma vez, nós reescrevemos já que
eram duas palavras com hífens
-
e agora temos esse cabeçalho que
se parece com nosso gato
-
e também com Hallowen.
-
[Legendado por: Valter Bigeli]
[Revisado por: Pablo Vieira]
