WEBVTT

00:00:00.975 --> 00:00:06.155
Poprzednio pokazałam, jak ustawić
style w JavaScript - w ten sposób.

00:00:06.255 --> 00:00:09.347
Chcąc zrobić
dużo stylów w JavaScript,

00:00:09.447 --> 00:00:12.120
wpiszecie kilkaset wierszy kodu

00:00:12.311 --> 00:00:14.984
z wartościami własności CSS.

00:00:15.084 --> 00:00:17.525
I JavaScript się zatka.

00:00:18.717 --> 00:00:20.851
Jest inny sposób.

00:00:20.991 --> 00:00:23.451
Możemy stworzyć klasę CSS

00:00:23.551 --> 00:00:28.189
i dodać do niej regułę CSS z nowymi
stylami, które chcemy wprowadzić.

00:00:28.284 --> 00:00:32.305
A potem wpiszemy
nazwę klasy w JavaScript.

00:00:33.181 --> 00:00:37.430
Zacznijmy tutaj, od tagu "style"

00:00:37.601 --> 00:00:39.154
i wypróbujmy to.

00:00:39.293 --> 00:00:45.720
Zrobimy klasę "catcolors"
(kolory kotów) i regułę CSS.

00:00:45.864 --> 00:00:48.227
Będzie tam: "color: orange"

00:00:48.332 --> 00:00:52.298
i "background-color: black".

00:00:53.986 --> 00:00:58.759
Żeby przypisać to
do elementu "heading", damy:

00:00:58.859 --> 00:01:03.111
"headingEl.className"...

00:01:03.196 --> 00:01:05.719
"= catcolors".

00:01:06.873 --> 00:01:11.888
I skasujmy przypisanie koloru
oraz koloru tła w JavaScript.

00:01:12.069 --> 00:01:14.745
Ha! Udało się.

00:01:15.618 --> 00:01:17.393
Zauważacie coś dziwnego?

00:01:17.476 --> 00:01:21.164
Atrybut HTML do nazw klas
to po prostu "class".

00:01:21.264 --> 00:01:23.986
Gdybym robiła to w HTML,

00:01:24.104 --> 00:01:26.832
musiałabym napisać:
class="catcolors".

00:01:26.932 --> 00:01:31.300
Ale w JavaScript trzeba było
napisać: "className".

00:01:31.452 --> 00:01:33.643
Do tego nie jesteśmy przyzwyczajeni!

00:01:33.754 --> 00:01:39.474
Robimy to, bo "class" jest słowem
kluczowym w języku JavaScript

00:01:39.574 --> 00:01:42.877
i ma szczególne znaczenie.

00:01:43.015 --> 00:01:46.788
Z tego powodu
przeglądarki używają "className",

00:01:46.925 --> 00:01:51.778
by odnieść się do atrybutu klasy
w HTML, żeby nic się nie pomyliło.

00:01:52.918 --> 00:01:56.492
Pamiętajcie: chcąc ustanowić
atrybut klasy elementu,

00:01:56.658 --> 00:01:59.304
piszecie ".className=".

00:02:01.324 --> 00:02:04.946
Żeby przypisać to
każdej z nazw zwierząt,

00:02:05.060 --> 00:02:08.943
możemy umieścić to w pętli:
"nameEls[i]."...

00:02:09.080 --> 00:02:12.655
"className = "catColors".

00:02:14.466 --> 00:02:16.486
To doda nazwę klasy,

00:02:16.652 --> 00:02:22.087
ale usunie wszelkie klasy,
które były tu wcześniej,

00:02:22.197 --> 00:02:23.638
bo napisaliśmy "=".

00:02:23.750 --> 00:02:28.611
Jeśli więc były tu przedtem
jakiekolwiek klasy, teraz ich nie ma.

00:02:28.711 --> 00:02:33.994
Klasy były: "class=animal".
Zmieniło się to w "catColors".

00:02:34.149 --> 00:02:38.396
Tak naprawdę chcemy dodać
nową nazwę klasy

00:02:38.496 --> 00:02:41.169
do tego atrybutu klasy.

00:02:41.276 --> 00:02:47.392
Możemy to zrobić, pisząc:
"+= catColors".

00:02:47.626 --> 00:02:48.646
Gotowe.

00:02:49.373 --> 00:02:53.778
To bezpieczny sposób, bo program
bierze nazwę poprzedniej klasy,

00:02:53.948 --> 00:02:57.121
dodaje spację i nową klasę.

00:02:59.072 --> 00:03:05.248
W nowszych przeglądarkach zrobimy to,
używając własności "classList".

00:03:05.373 --> 00:03:07.951
Piszemy zatem: "nameEls[i]"...

00:03:08.118 --> 00:03:11.711
".classList"...

00:03:11.811 --> 00:03:14.860
".add("catcolors")".

00:03:15.953 --> 00:03:19.598
Teraz jest ładniej,
ale nie działa to wszędzie.

00:03:19.681 --> 00:03:23.924
Jeśli chcecie tego używać,
wejdźcie na "caniuse.com" i sprawdźcie,

00:03:24.024 --> 00:03:28.375
czy program obsługują przeglądarki,
z którymi ma współpracować wasza strona.

00:03:28.475 --> 00:03:32.243
To ładniejsze, ale nie jest miło,
gdy strona się zacina,

00:03:32.326 --> 00:03:36.485
bo używacie funkcji,
o której nie wie przeglądarka.

00:03:36.652 --> 00:03:38.066
Zlikwiduję to.

00:03:38.149 --> 00:03:41.588
Niech moja strona współpracuje
z wieloma przeglądarkami!

00:03:41.726 --> 00:03:46.115
Często chcemy zmieniać
style poszczególne,

00:03:46.246 --> 00:03:48.345
zamiast przypisywać nazwy klas.

00:03:48.465 --> 00:03:54.355
Powtarzam: pamiętajcie,
że macie oba te narzędzia.

00:03:54.455 --> 00:03:58.697
Decydujcie, które bardziej się przyda
w konkretnej sytuacji.