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 <i>tag</i> '<i></i>'
e tentar fazer isso.</i>

Vamos fazer uma classe '<i>.catcolors</i>'
e a regra CSS para ela.

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

Agora, para atribuir isso ao elemento
<i>heading</i>, podemos dizer:

<i>headingEl.className = "catcolors"</i>;

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 "<i>class</i>".

Se tivesse feito isso em HTML, teria sido
<i>class="catcolors"</i>.

Mas quando eu faço isso em JavaScript,
eu tenho que dizer <i>.className</i>,

o que não estamos acostumados.

Isso é porque o <i>class</i> é na verdade uma
palavra-chave na linguagem JavaScript

que tem um significado especial
para a linguagem.

Por causa disso, os navegadores decidiram
usar "<i>className</i>" 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 <i>.className=</i>

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

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

<i>nameEls[i].className="catColors";</i>

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 é <i>class = "animal"</i>.

E então essa se tornou <i>catColors</i>.

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

Podemos fazer isso escrevendo
<i>+= " catColors</i>".

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 <i>classList</i>.

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

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 [<i>Fernando dos Reis</i>]
Revisado por [Carlos A. N. C. R.]