0:00:00.702,0:00:05.963
No último vídeo mostrei como definir[br]estilos em JavaScript, como este aqui.

0:00:06.613,0:00:10.202
Se você definir um monte de estilos em[br]JavaScript, você pode acabar

0:00:10.202,0:00:14.671
com centenas de linhas de código apenas[br]definindo os valores das propriedades CSS.

0:00:14.671,0:00:18.076
E isso pode realmente sobrecarregar[br]o seu JavaScript.

0:00:18.566,0:00:20.666
Há uma outra forma que poderíamos[br]fazer isso.

0:00:20.666,0:00:23.213
Poderíamos criar uma classe CSS,

0:00:23.213,0:00:28.275
e adicionar uma regra CSS para essa classe[br]com os novos estilos que queremos,

0:00:28.275,0:00:33.116
e em seguida, adicionar dinamicamente[br]o nome da classe em JavaScript.

0:00:33.116,0:00:38.932
Vamos começar aqui com a <i>tag</i> '<i></i>'[br]e tentar fazer isso.</i>

0:00:38.932,0:00:45.798
Vamos fazer uma classe '<i>.catcolors</i>'[br]e a regra CSS para ela.

0:00:45.798,0:00:53.085
E vai ter <i>color: orange</i> (cor: laranja), [br]e <i>background-color: black</i> (fundo: preto).

0:00:54.355,0:00:58.854
Agora, para atribuir isso ao elemento[br]<i>heading</i>, podemos dizer:

0:00:58.854,0:01:05.813
<i>headingEl.className = "catcolors"</i>;

0:01:05.813,0:01:09.485
Podemos eliminar a atribuição da cor

0:01:09.485,0:01:12.222
e da cor de fundo em JavaScript.

0:01:12.222,0:01:13.322
Pronto!

0:01:13.322,0:01:15.113
Assim funcionou.

0:01:15.113,0:01:17.466
Mas notou algo estranho?

0:01:17.466,0:01:21.249
O atributo HTML para nomes de classes[br]é apenas "<i>class</i>".

0:01:21.249,0:01:26.779
Se tivesse feito isso em HTML, teria sido[br]<i>class="catcolors"</i>.

0:01:26.779,0:01:31.589
Mas quando eu faço isso em JavaScript,[br]eu tenho que dizer <i>.className</i>,

0:01:31.589,0:01:33.806
o que não estamos acostumados.

0:01:33.806,0:01:39.084
Isso é porque o <i>class</i> é na verdade uma[br]palavra-chave na linguagem JavaScript

0:01:39.084,0:01:42.613
que tem um significado especial[br]para a linguagem.

0:01:42.613,0:01:47.534
Por causa disso, os navegadores decidiram[br]usar "<i>className</i>" para se referir

0:01:47.534,0:01:52.665
ao atributo de classe HTML, apenas[br]para que não se confundissem.

0:01:53.225,0:01:56.613
Lembre-se, se você deseja definir o[br]atributo de classe de um elemento

0:01:56.613,0:02:00.333
você usa <i>.className=</i>

0:02:01.443,0:02:04.383
Agora, para atribuir isso a cada um[br]dos nomes de animais,

0:02:04.383,0:02:06.657
podemos colocá-lo dentro do loop, então:

0:02:06.657,0:02:13.449
<i>nameEls[i].className="catColors";</i>

0:02:14.609,0:02:19.427
Isso adicionará o nome da classe, mas na[br]verdade, ele irá remover quaisquer classes

0:02:19.427,0:02:23.704
que estavam lá antes, porque[br]dissemos que é igual.

0:02:23.704,0:02:28.236
Se tivéssemos quaisquer classes lá antes,[br]agora já se foram.

0:02:28.236,0:02:32.053
Agora, eles realmente têm classe antes,[br]que é <i>class = "animal"</i>.

0:02:32.053,0:02:34.340
E então essa se tornou <i>catColors</i>.

0:02:34.340,0:02:41.305
O que realmente queremos fazer é adicionar[br]um novo nome de classe para este atributo.

0:02:41.305,0:02:47.562
Podemos fazer isso escrevendo[br]<i>+= " catColors</i>".

0:02:47.562,0:02:48.828
Lá vamos nós.

0:02:48.828,0:02:51.901
Essa é a coisa segura a fazer,[br]porque vai pegar

0:02:51.901,0:02:53.904
qualquer que seja a classe anterior,

0:02:53.904,0:02:58.048
adicionar a ela um espaço e[br]depois a nova classe.

0:02:58.998,0:03:02.209
Existe outra maneira de fazer isso[br]em navegadores mais recentes

0:03:02.209,0:03:04.975
utilizando a propriedade <i>classList</i>.

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

0:03:16.245,0:03:19.649
Isso é muito mais agradável,[br]mas não funciona em todos os lugares.

0:03:19.649,0:03:24.014
Se você quiser usar isso,[br]você tem que ir na caniuse.com,

0:03:24.014,0:03:26.532
e ter certeza que é suportado[br]em todos os navegadores

0:03:26.532,0:03:28.756
nos quais você queira que[br]sua página funcione.

0:03:28.756,0:03:32.189
É muito mais agradável, mas não é bom[br]se suas páginas pararem

0:03:32.189,0:03:36.254
porque você está usando uma função que[br]o navegador não conhece.

0:03:36.254,0:03:38.143
Por isso só vou comentá-la.

0:03:38.143,0:03:41.337
Porque quero a minha funcionando [br]em um monte de navegadores.

0:03:41.337,0:03:46.067
Têm muitas vezes que queremos [br]mudar os estilos individuais,

0:03:46.067,0:03:48.558
em vez de atribuir nomes de classes.

0:03:48.558,0:03:54.463
Lembre-se que você tem essas duas[br]ferramentas em sua caixa de ferramentas,

0:03:54.463,0:03:58.214
e pense sobre o que poderia ser melhor,[br]dependendo da situação.

0:03:58.214,0:04:00.000
Legendado por [<i>Fernando dos Reis</i>][br]Revisado por [Carlos A. N. C. R.]