JavaScript: Praca z klasami CSS

0:00W tej lekcji zajmiemy się czymś, co jest bardzo, bardzo przydatne i bardzo często

0:04wykorzystywane, czyli ustawianiem klas CSS dla poszczególnych elementów.

0:08Dzięki temu będziemy oczywiście mogli

0:10całkowicie zmienić wygląd jakiegoś elementu lub nawet całej strony.

0:14I to jest coś, czego nie da się zrobić jakby w samym CSS.

0:17My musimy wcześniej zdefiniować wszystkie

0:18klasy, natomiast to jest właśnie potęga JavaScriptu, że możemy z użyciem właśnie

0:23tego kodu zmieniać wygląd strony dynamicznie.

0:26Więc mamy taką prostą stronę, na której

0:28zdefiniowałem trzy klasy tj link, red i green.

0:32Będziemy chcieli tymi klasami manipulować na tym oto elemencie link.

0:36Czyli jest tutaj taki element,

0:37będę chciał sobie go teraz wyszukać, więc zapiszemy go sobie do stałej

0:42document.querySelektor i ma on klasę link

0:47i będziemy chcieli na początek odczytać sobie wszystkie jego klasy

0:50i powiem Ci, że można to zrobić taką starą metodą, która nazywa się className.

0:54W zasadzie jest to właściwość, a więc link.className.

0:58Zobacz to nam zwróci wszystkie klasy jakie są przypisane do tego elementu.

1:03On ma aktualnie jedną klasę, tutaj więc tylko jedna została zwrócona.

1:07Jest to dla nas zwracane, oczywiście jako wartość o typie String.

1:10I teraz za pomocą className

1:13moglibyśmy zmienić również klasę, czyli przypisać jej tutaj np. red.

1:18Zauważ teraz ten link jest czerwony, ale to co się stało

1:22to została usunięta klasa link, która tutaj była, czyli nadpisaliśmy klasę.

1:27Z tego powodu nie jest dobrym pomysłem

1:29korzystanie z tej właściwości className aby ustawiać jakieś klasy, chyba, że od

1:34razu chcesz rzeczywiście ustawić sporo tych klas.

1:37Możesz je tutaj podać po spacji.

1:39Podobnie mógłbyś zrobić za pomocą setAttribute class.

1:43Byłoby to dokładnie to samo.

1:45Niemniej jednak mamy nowsze metody, które od wielu lat są wspierane we wszystkich

1:48przeglądarkach i one pozwolą nam pracować konkretnie z pojedynczymi klasami.

1:53Więc teraz będę chciał Ci pokazać jak one wyglądają.

1:56Na początek będę chciał dodać klasę red do

1:59właśnie tego linku i zrobimy to za pomocą klasy list.

2:02To jest taki specjalny obiekt dostępny na

2:04wszystkich elementach HTML i mamy pod nim pewne metody.

2:09Jedną z metod jest metoda add, której przekazujemy właśnie string

2:13i jest to klasa, którą chcemy dodać.

2:15Zobacz, teraz dodaliśmy klasę red, ale nie

2:18usunęliśmy klasy, która już tam wcześniej była, czyli klasy link.

2:22Jeżeli chcielibyśmy dodać dwie klasy naraz lub 3, 5 itd.

2:26to nie podajemy ich tutaj po spacji, ale

2:28podajemy je jako kolejne parametr do tej funkcji.

2:31Czyli ta funkcja może przyjmować dowolną liczbę parametrów.

2:34Teraz dodaliśmy dwie klasy i red i green.

2:37No i klasa green wygrywa z red, bo po prostu jest dodana później.

2:41Kolejną metodą, tym razem służącą do

2:43usuwania klas, będzie metoda również na obiekcie classList, która

2:47nazywa się remove i powiedzmy, że chcę usunąć klasę red.

2:51Jeżeli zrobię to w ten sposób, zauważ, że klasa red tutaj została usunięta.

2:56Czyli jak widzisz praca z tymi klasami jest bardzo prosta.

2:59No i mamy jeszcze jedną metodę, która nazywa się toggle.

3:02Wygląda ona tak

3:03również na obiekcie classList i ona nam doda klasę, jeśli jej nie ma i

3:09usunie klasę, jeśli ta klasa tam aktualnie jest, więc możemy powiedzieć green.

3:14A więc zanim to jeszcze wykonamy, zerknijmy sobie.

3:16Klasa green jest, więc jak wykonamy toggle to ona powinna zostać usunięta.

3:21I tak też się stało. I to jest fajne

3:23jeżeli będziemy mieli dwa stany np.

3:25na jakimś przycisku będziemy mieli klasę is loading,

3:27powiedzmy będzie to taki spinner, który

3:29nam pokazuje, że coś się wczytuje to wystarczy, że zrobimy toggle is loading,

3:34no i jeżeli tej klasy nie ma zostanie dodana,

3:36jeżeli jest zostanie usunięta.

3:37Warto o tym wiedzieć, że nie musimy

3:39sprawdzać czy jakaś klasa na elemencie jest.

3:42Niemniej jednak, jeżeli chciałbyś mimo wszystko sprawdzić np. w if czy jakaś klasa

3:47na elemencie jest dodana, to możemy się odwołać do classList i mamy tam metodę

3:51contains, której również przekazujemy nazwę klasy. Więc możemy na tym etapie

3:56zapytać czy klasa green jest dodana i może zamiast robić to w if to po prostu

4:01zrobię to w console.log, ale pamiętaj, że to nam zawsze zwróci true lub false, więc

4:06możemy z tego korzystać jak najbardziej w instrukcji warunkowej.

4:10Zobaczmy.

4:11Jak widzisz mamy false, bo tej klasy green

4:13tam nie ma, dlatego, że ją usunęliśmy tym zapisem.

4:16Natomiast gdybyśmy jej nie usunęli otrzymamy true.

4:20Zostawię to w takiej formie.

4:21I podsumowując mamy taką archaiczną

4:23właściwość jak className, z której w zasadzie w ogóle nie musisz korzystać.

4:27Ona nam odczytuje wszystkie klasy w formie

4:29jednego stringu albo ustawia nam cały atrybut class,

4:32natomiast mamy również nowsze metody na

4:35obiekcie classList, które pozwalają nam dodawać klasy jak widzisz, usuwać klasy

4:40czy robić toggle, a także sprawdzać czy klasa jest dostępna.