WEBVTT

00:00:00.702 --> 00:00:05.963
No último vídeo mostrei como definir
estilos em JavaScript, como este aqui.

00:00:06.613 --> 00:00:10.202
Se você definir um monte de estilos em
JavaScript, você pode acabar

00:00:10.202 --> 00:00:14.671
com centenas de linhas de código apenas
definindo os valores das propriedades CSS.

00:00:14.671 --> 00:00:18.076
E isso pode realmente sobrecarregar
o seu JavaScript.

00:00:18.566 --> 00:00:20.666
Há uma outra forma que poderíamos
fazer isso.

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

00:00:23.213 --> 00:00:28.275
e adicionar uma regra CSS para essa classe
com os novos estilos que queremos,

00:00:28.275 --> 00:00:33.116
e em seguida, adicionar dinamicamente
o nome da classe em JavaScript.

00:00:33.116 --> 00:00:38.932
Vamos começar aqui com a <i>tag</i> '<i></i>'
e tentar fazer isso.</i>

00:00:38.932 --> 00:00:45.798
Vamos fazer uma classe '<i>.catcolors</i>'
e a regra CSS para ela.

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

00:00:54.355 --> 00:00:58.854
Agora, para atribuir isso ao elemento
<i>heading</i>, podemos dizer:

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

00:01:05.813 --> 00:01:09.485
Podemos eliminar a atribuição da cor

00:01:09.485 --> 00:01:12.222
e da cor de fundo em JavaScript.

00:01:12.222 --> 00:01:13.322
Pronto!

00:01:13.322 --> 00:01:15.113
Assim funcionou.

00:01:15.113 --> 00:01:17.466
Mas notou algo estranho?

00:01:17.466 --> 00:01:21.249
O atributo HTML para nomes de classes
é apenas "<i>class</i>".

00:01:21.249 --> 00:01:26.779
Se tivesse feito isso em HTML, teria sido
<i>class="catcolors"</i>.

00:01:26.779 --> 00:01:31.589
Mas quando eu faço isso em JavaScript,
eu tenho que dizer <i>.className</i>,

00:01:31.589 --> 00:01:33.806
o que não estamos acostumados.

00:01:33.806 --> 00:01:39.084
Isso é porque o <i>class</i> é na verdade uma
palavra-chave na linguagem JavaScript

00:01:39.084 --> 00:01:42.613
que tem um significado especial
para a linguagem.

00:01:42.613 --> 00:01:47.534
Por causa disso, os navegadores decidiram
usar "<i>className</i>" para se referir

00:01:47.534 --> 00:01:52.665
ao atributo de classe HTML, apenas
para que não se confundissem.

00:01:53.225 --> 00:01:56.613
Lembre-se, se você deseja definir o
atributo de classe de um elemento

00:01:56.613 --> 00:02:00.333
você usa <i>.className=</i>

00:02:01.443 --> 00:02:04.383
Agora, para atribuir isso a cada um
dos nomes de animais,

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

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

00:02:14.609 --> 00:02:19.427
Isso adicionará o nome da classe, mas na
verdade, ele irá remover quaisquer classes

00:02:19.427 --> 00:02:23.704
que estavam lá antes, porque
dissemos que é igual.

00:02:23.704 --> 00:02:28.236
Se tivéssemos quaisquer classes lá antes,
agora já se foram.

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

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

00:02:34.340 --> 00:02:41.305
O que realmente queremos fazer é adicionar
um novo nome de classe para este atributo.

00:02:41.305 --> 00:02:47.562
Podemos fazer isso escrevendo
<i>+= " catColors</i>".

00:02:47.562 --> 00:02:48.828
Lá vamos nós.

00:02:48.828 --> 00:02:51.901
Essa é a coisa segura a fazer,
porque vai pegar

00:02:51.901 --> 00:02:53.904
qualquer que seja a classe anterior,

00:02:53.904 --> 00:02:58.048
adicionar a ela um espaço e
depois a nova classe.

00:02:58.998 --> 00:03:02.209
Existe outra maneira de fazer isso
em navegadores mais recentes

00:03:02.209 --> 00:03:04.975
utilizando a propriedade <i>classList</i>.

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

00:03:16.245 --> 00:03:19.649
Isso é muito mais agradável,
mas não funciona em todos os lugares.

00:03:19.649 --> 00:03:24.014
Se você quiser usar isso,
você tem que ir na caniuse.com,

00:03:24.014 --> 00:03:26.532
e ter certeza que é suportado
em todos os navegadores

00:03:26.532 --> 00:03:28.756
nos quais você queira que
sua página funcione.

00:03:28.756 --> 00:03:32.189
É muito mais agradável, mas não é bom
se suas páginas pararem

00:03:32.189 --> 00:03:36.254
porque você está usando uma função que
o navegador não conhece.

00:03:36.254 --> 00:03:38.143
Por isso só vou comentá-la.

00:03:38.143 --> 00:03:41.337
Porque quero a minha funcionando 
em um monte de navegadores.

00:03:41.337 --> 00:03:46.067
Têm muitas vezes que queremos 
mudar os estilos individuais,

00:03:46.067 --> 00:03:48.558
em vez de atribuir nomes de classes.

00:03:48.558 --> 00:03:54.463
Lembre-se que você tem essas duas
ferramentas em sua caixa de ferramentas,

00:03:54.463 --> 00:03:58.214
e pense sobre o que poderia ser melhor,
dependendo da situação.

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