< Return to Video

Mudando estilos CSS (Versão Vídeo)

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

more » « less
Video Language:
English
Duration:
02:46

Portuguese, Brazilian subtitles

Revisions