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.]