Mudando classes no CSS

Esta é uma gravação de vídeo de uma palestra interativa, carregado para tornar mais fácil a criação de legendas. Por favor, assista a palestra interativa original na Khan Academy, onde você pode pausar e editar o código e ver o código em melhor resolução: http://www.khanacademy.org/computer-programming

No último vídeo mostrei como definir
estilos em JavaScript, como este aqui.

Se você definir um monte de estilos em
JavaScript, você pode acabar

com centenas de linhas de código apenas
definindo os valores das propriedades CSS.

E isso pode realmente sobrecarregar
o seu JavaScript.

Há uma outra forma que poderíamos
fazer isso.

Poderíamos criar uma classe CSS,

e adicionar uma regra CSS para essa classe
com os novos estilos que queremos,

e em seguida, adicionar dinamicamente
o nome da classe em JavaScript.

Vamos começar aqui com a tag ''
e tentar fazer isso.

Vamos fazer uma classe '.catcolors'
e a regra CSS para ela.

E vai ter color: orange (cor: laranja),
e background-color: black (fundo: preto).

Agora, para atribuir isso ao elemento
heading, podemos dizer:

headingEl.className = "catcolors";

Podemos eliminar a atribuição da cor

e da cor de fundo em JavaScript.

Pronto!

Assim funcionou.

Mas notou algo estranho?

O atributo HTML para nomes de classes
é apenas "class".

Se tivesse feito isso em HTML, teria sido
class="catcolors".

Mas quando eu faço isso em JavaScript,
eu tenho que dizer .className,

o que não estamos acostumados.

Isso é porque o class é na verdade uma
palavra-chave na linguagem JavaScript

que tem um significado especial
para a linguagem.

Por causa disso, os navegadores decidiram
usar "className" para se referir

ao atributo de classe HTML, apenas
para que não se confundissem.

Lembre-se, se você deseja definir o
atributo de classe de um elemento

você usa .className=

Agora, para atribuir isso a cada um
dos nomes de animais,

podemos colocá-lo dentro do loop, então:

nameEls[i].className="catColors";

Isso adicionará o nome da classe, mas na
verdade, ele irá remover quaisquer classes

que estavam lá antes, porque
dissemos que é igual.

Se tivéssemos quaisquer classes lá antes,
agora já se foram.

Agora, eles realmente têm classe antes,
que é class = "animal".

E então essa se tornou catColors.

O que realmente queremos fazer é adicionar
um novo nome de classe para este atributo.

Podemos fazer isso escrevendo
+= " catColors".

Lá vamos nós.

Essa é a coisa segura a fazer,
porque vai pegar

qualquer que seja a classe anterior,

adicionar a ela um espaço e
depois a nova classe.

Existe outra maneira de fazer isso
em navegadores mais recentes

utilizando a propriedade classList.

Então, para fazer isso dizemos:
nameEls[i].classList.add("catcolors");.

Isso é muito mais agradável,
mas não funciona em todos os lugares.

Se você quiser usar isso,
você tem que ir na caniuse.com,

e ter certeza que é suportado
em todos os navegadores

nos quais você queira que
sua página funcione.

É muito mais agradável, mas não é bom
se suas páginas pararem

porque você está usando uma função que
o navegador não conhece.

Por isso só vou comentá-la.

Porque quero a minha funcionando
em um monte de navegadores.

Têm muitas vezes que queremos
mudar os estilos individuais,

em vez de atribuir nomes de classes.

Lembre-se que você tem essas duas
ferramentas em sua caixa de ferramentas,

e pense sobre o que poderia ser melhor,
dependendo da situação.

Legendado por [Fernando dos Reis]
Revisado por [Carlos A. N. C. R.]