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]