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 tag ''
e tentar fazer isso.
10
00:00:38,932 --> 00:00:45,798
Vamos fazer uma classe '.catcolors'
e a regra CSS para ela.
11
00:00:45,798 --> 00:00:53,085
E vai ter color: orange (cor: laranja),
e background-color: black (fundo: preto).
12
00:00:54,355 --> 00:00:58,854
Agora, para atribuir isso ao elemento
heading, podemos dizer:
13
00:00:58,854 --> 00:01:05,813
headingEl.className = "catcolors";
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 "class".
20
00:01:21,249 --> 00:01:26,779
Se tivesse feito isso em HTML, teria sido
class="catcolors".
21
00:01:26,779 --> 00:01:31,589
Mas quando eu faço isso em JavaScript,
eu tenho que dizer .className,
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 class é 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 "className" 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 .className=
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
nameEls[i].className="catColors";
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 é class = "animal".
36
00:02:32,053 --> 00:02:34,340
E então essa se tornou catColors.
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
+= " catColors".
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 classList.
45
00:03:05,915 --> 00:03:15,135
Então, para fazer isso dizemos:
nameEls[i].classList.add("catcolors");.
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 [Fernando dos Reis]
Revisado por [Carlos A. N. C. R.]