1
00:00:00,975 --> 00:00:06,155
Poprzednio pokazałam, jak ustawić
style w JavaScript - w ten sposób.

2
00:00:06,255 --> 00:00:09,347
Chcąc zrobić
dużo stylów w JavaScript,

3
00:00:09,447 --> 00:00:12,120
wpiszecie kilkaset wierszy kodu

4
00:00:12,311 --> 00:00:14,984
z wartościami własności CSS.

5
00:00:15,084 --> 00:00:17,525
I JavaScript się zatka.

6
00:00:18,717 --> 00:00:20,851
Jest inny sposób.

7
00:00:20,991 --> 00:00:23,451
Możemy stworzyć klasę CSS

8
00:00:23,551 --> 00:00:28,189
i dodać do niej regułę CSS z nowymi
stylami, które chcemy wprowadzić.

9
00:00:28,284 --> 00:00:32,305
A potem wpiszemy
nazwę klasy w JavaScript.

10
00:00:33,181 --> 00:00:37,430
Zacznijmy tutaj, od tagu "style"

11
00:00:37,601 --> 00:00:39,154
i wypróbujmy to.

12
00:00:39,293 --> 00:00:45,720
Zrobimy klasę "catcolors"
(kolory kotów) i regułę CSS.

13
00:00:45,864 --> 00:00:48,227
Będzie tam: "color: orange"

14
00:00:48,332 --> 00:00:52,298
i "background-color: black".

15
00:00:53,986 --> 00:00:58,759
Żeby przypisać to
do elementu "heading", damy:

16
00:00:58,859 --> 00:01:03,111
"headingEl.className"...

17
00:01:03,196 --> 00:01:05,719
"= catcolors".

18
00:01:06,873 --> 00:01:11,888
I skasujmy przypisanie koloru
oraz koloru tła w JavaScript.

19
00:01:12,069 --> 00:01:14,745
Ha! Udało się.

20
00:01:15,618 --> 00:01:17,393
Zauważacie coś dziwnego?

21
00:01:17,476 --> 00:01:21,164
Atrybut HTML do nazw klas
to po prostu "class".

22
00:01:21,264 --> 00:01:23,986
Gdybym robiła to w HTML,

23
00:01:24,104 --> 00:01:26,832
musiałabym napisać:
class="catcolors".

24
00:01:26,932 --> 00:01:31,300
Ale w JavaScript trzeba było
napisać: "className".

25
00:01:31,452 --> 00:01:33,643
Do tego nie jesteśmy przyzwyczajeni!

26
00:01:33,754 --> 00:01:39,474
Robimy to, bo "class" jest słowem
kluczowym w języku JavaScript

27
00:01:39,574 --> 00:01:42,877
i ma szczególne znaczenie.

28
00:01:43,015 --> 00:01:46,788
Z tego powodu
przeglądarki używają "className",

29
00:01:46,925 --> 00:01:51,778
by odnieść się do atrybutu klasy
w HTML, żeby nic się nie pomyliło.

30
00:01:52,918 --> 00:01:56,492
Pamiętajcie: chcąc ustanowić
atrybut klasy elementu,

31
00:01:56,658 --> 00:01:59,304
piszecie ".className=".

32
00:02:01,324 --> 00:02:04,946
Żeby przypisać to
każdej z nazw zwierząt,

33
00:02:05,060 --> 00:02:08,943
możemy umieścić to w pętli:
"nameEls[i]."...

34
00:02:09,080 --> 00:02:12,655
"className = "catColors".

35
00:02:14,466 --> 00:02:16,486
To doda nazwę klasy,

36
00:02:16,652 --> 00:02:22,087
ale usunie wszelkie klasy,
które były tu wcześniej,

37
00:02:22,197 --> 00:02:23,638
bo napisaliśmy "=".

38
00:02:23,750 --> 00:02:28,611
Jeśli więc były tu przedtem
jakiekolwiek klasy, teraz ich nie ma.

39
00:02:28,711 --> 00:02:33,994
Klasy były: "class=animal".
Zmieniło się to w "catColors".

40
00:02:34,149 --> 00:02:38,396
Tak naprawdę chcemy dodać
nową nazwę klasy

41
00:02:38,496 --> 00:02:41,169
do tego atrybutu klasy.

42
00:02:41,276 --> 00:02:47,392
Możemy to zrobić, pisząc:
"+= catColors".

43
00:02:47,626 --> 00:02:48,646
Gotowe.

44
00:02:49,373 --> 00:02:53,778
To bezpieczny sposób, bo program
bierze nazwę poprzedniej klasy,

45
00:02:53,948 --> 00:02:57,121
dodaje spację i nową klasę.

46
00:02:59,072 --> 00:03:05,248
W nowszych przeglądarkach zrobimy to,
używając własności "classList".

47
00:03:05,373 --> 00:03:07,951
Piszemy zatem: "nameEls[i]"...

48
00:03:08,118 --> 00:03:11,711
".classList"...

49
00:03:11,811 --> 00:03:14,860
".add("catcolors")".

50
00:03:15,953 --> 00:03:19,598
Teraz jest ładniej,
ale nie działa to wszędzie.

51
00:03:19,681 --> 00:03:23,924
Jeśli chcecie tego używać,
wejdźcie na "caniuse.com" i sprawdźcie,

52
00:03:24,024 --> 00:03:28,375
czy program obsługują przeglądarki,
z którymi ma współpracować wasza strona.

53
00:03:28,475 --> 00:03:32,243
To ładniejsze, ale nie jest miło,
gdy strona się zacina,

54
00:03:32,326 --> 00:03:36,485
bo używacie funkcji,
o której nie wie przeglądarka.

55
00:03:36,652 --> 00:03:38,066
Zlikwiduję to.

56
00:03:38,149 --> 00:03:41,588
Niech moja strona współpracuje
z wieloma przeglądarkami!

57
00:03:41,726 --> 00:03:46,115
Często chcemy zmieniać
style poszczególne,

58
00:03:46,246 --> 00:03:48,345
zamiast przypisywać nazwy klas.

59
00:03:48,465 --> 00:03:54,355
Powtarzam: pamiętajcie,
że macie oba te narzędzia.

60
00:03:54,455 --> 00:03:58,697
Decydujcie, które bardziej się przyda
w konkretnej sytuacji.