1
00:00:00,702 --> 00:00:05,963
No último vídeo mostrei como definir
estilos em JavaScript, como este aqui.

2
00:00:06,613 --> 00:00:10,202
Se você definir um monte de estilos em
JavaScript, você pode acabar

3
00:00:10,202 --> 00:00:14,671
com centenas de linhas de código apenas
definindo os valores das propriedades CSS.

4
00:00:14,671 --> 00:00:18,076
E isso pode realmente sobrecarregar
o seu JavaScript.

5
00:00:18,566 --> 00:00:20,666
Há uma outra forma que poderíamos
fazer isso.

6
00:00:20,666 --> 00:00:23,213
Poderíamos criar uma classe CSS,

7
00:00:23,213 --> 00:00:28,275
e adicionar uma regra CSS para essa classe
com os novos estilos que queremos,

8
00:00:28,275 --> 00:00:33,116
e em seguida, adicionar dinamicamente
o nome da classe em JavaScript.

9
00:00:33,116 --> 00:00:38,932
Vamos começar aqui com a <i>tag</i> '<i></i>'
e tentar fazer isso.</i>

10
00:00:38,932 --> 00:00:45,798
Vamos fazer uma classe '<i>.catcolors</i>'
e a regra CSS para ela.

11
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).

12
00:00:54,355 --> 00:00:58,854
Agora, para atribuir isso ao elemento
<i>heading</i>, podemos dizer:

13
00:00:58,854 --> 00:01:05,813
<i>headingEl.className = "catcolors"</i>;

14
00:01:05,813 --> 00:01:09,485
Podemos eliminar a atribuição da cor

15
00:01:09,485 --> 00:01:12,222
e da cor de fundo em JavaScript.

16
00:01:12,222 --> 00:01:13,322
Pronto!

17
00:01:13,322 --> 00:01:15,113
Assim funcionou.

18
00:01:15,113 --> 00:01:17,466
Mas notou algo estranho?

19
00:01:17,466 --> 00:01:21,249
O atributo HTML para nomes de classes
é apenas "<i>class</i>".

20
00:01:21,249 --> 00:01:26,779
Se tivesse feito isso em HTML, teria sido
<i>class="catcolors"</i>.

21
00:01:26,779 --> 00:01:31,589
Mas quando eu faço isso em JavaScript,
eu tenho que dizer <i>.className</i>,

22
00:01:31,589 --> 00:01:33,806
o que não estamos acostumados.

23
00:01:33,806 --> 00:01:39,084
Isso é porque o <i>class</i> é na verdade uma
palavra-chave na linguagem JavaScript

24
00:01:39,084 --> 00:01:42,613
que tem um significado especial
para a linguagem.

25
00:01:42,613 --> 00:01:47,534
Por causa disso, os navegadores decidiram
usar "<i>className</i>" para se referir

26
00:01:47,534 --> 00:01:52,665
ao atributo de classe HTML, apenas
para que não se confundissem.

27
00:01:53,225 --> 00:01:56,613
Lembre-se, se você deseja definir o
atributo de classe de um elemento

28
00:01:56,613 --> 00:02:00,333
você usa <i>.className=</i>

29
00:02:01,443 --> 00:02:04,383
Agora, para atribuir isso a cada um
dos nomes de animais,

30
00:02:04,383 --> 00:02:06,657
podemos colocá-lo dentro do loop, então:

31
00:02:06,657 --> 00:02:13,449
<i>nameEls[i].className="catColors";</i>

32
00:02:14,609 --> 00:02:19,427
Isso adicionará o nome da classe, mas na
verdade, ele irá remover quaisquer classes

33
00:02:19,427 --> 00:02:23,704
que estavam lá antes, porque
dissemos que é igual.

34
00:02:23,704 --> 00:02:28,236
Se tivéssemos quaisquer classes lá antes,
agora já se foram.

35
00:02:28,236 --> 00:02:32,053
Agora, eles realmente têm classe antes,
que é <i>class = "animal"</i>.

36
00:02:32,053 --> 00:02:34,340
E então essa se tornou <i>catColors</i>.

37
00:02:34,340 --> 00:02:41,305
O que realmente queremos fazer é adicionar
um novo nome de classe para este atributo.

38
00:02:41,305 --> 00:02:47,562
Podemos fazer isso escrevendo
<i>+= " catColors</i>".

39
00:02:47,562 --> 00:02:48,828
Lá vamos nós.

40
00:02:48,828 --> 00:02:51,901
Essa é a coisa segura a fazer,
porque vai pegar

41
00:02:51,901 --> 00:02:53,904
qualquer que seja a classe anterior,

42
00:02:53,904 --> 00:02:58,048
adicionar a ela um espaço e
depois a nova classe.

43
00:02:58,998 --> 00:03:02,209
Existe outra maneira de fazer isso
em navegadores mais recentes

44
00:03:02,209 --> 00:03:04,975
utilizando a propriedade <i>classList</i>.

45
00:03:05,915 --> 00:03:15,135
Então, para fazer isso dizemos:
<i>nameEls[i].classList.add("catcolors");</i>.

46
00:03:16,245 --> 00:03:19,649
Isso é muito mais agradável,
mas não funciona em todos os lugares.

47
00:03:19,649 --> 00:03:24,014
Se você quiser usar isso,
você tem que ir na caniuse.com,

48
00:03:24,014 --> 00:03:26,532
e ter certeza que é suportado
em todos os navegadores

49
00:03:26,532 --> 00:03:28,756
nos quais você queira que
sua página funcione.

50
00:03:28,756 --> 00:03:32,189
É muito mais agradável, mas não é bom
se suas páginas pararem

51
00:03:32,189 --> 00:03:36,254
porque você está usando uma função que
o navegador não conhece.

52
00:03:36,254 --> 00:03:38,143
Por isso só vou comentá-la.

53
00:03:38,143 --> 00:03:41,337
Porque quero a minha funcionando 
em um monte de navegadores.

54
00:03:41,337 --> 00:03:46,067
Têm muitas vezes que queremos 
mudar os estilos individuais,

55
00:03:46,067 --> 00:03:48,558
em vez de atribuir nomes de classes.

56
00:03:48,558 --> 00:03:54,463
Lembre-se que você tem essas duas
ferramentas em sua caixa de ferramentas,

57
00:03:54,463 --> 00:03:58,214
e pense sobre o que poderia ser melhor,
dependendo da situação.

58
00:03:58,214 --> 00:04:00,000
Legendado por [<i>Fernando dos Reis</i>]
Revisado por [Carlos A. N. C. R.]