Edytowanie klas CSS

To tylko zapis naszych interaktywnych sesji poświęconych kodowaniu, stworzony by ułatwić ich przełożenie na inne języki. Polecamy obejrzenie tych sesji bezpośrednio pod adresem: https://pl.khanacademy.org/cs/programming/

Poprzednio pokazałam, jak ustawić
style w JavaScript - w ten sposób.

Chcąc zrobić
dużo stylów w JavaScript,

wpiszecie kilkaset wierszy kodu

z wartościami własności CSS.

I JavaScript się zatka.

Jest inny sposób.

Możemy stworzyć klasę CSS

i dodać do niej regułę CSS z nowymi
stylami, które chcemy wprowadzić.

A potem wpiszemy
nazwę klasy w JavaScript.

Zacznijmy tutaj, od tagu "style"

i wypróbujmy to.

Zrobimy klasę "catcolors"
(kolory kotów) i regułę CSS.

Będzie tam: "color: orange"

i "background-color: black".

Żeby przypisać to
do elementu "heading", damy:

"headingEl.className"...

"= catcolors".

I skasujmy przypisanie koloru
oraz koloru tła w JavaScript.

Ha! Udało się.

Zauważacie coś dziwnego?

Atrybut HTML do nazw klas
to po prostu "class".

Gdybym robiła to w HTML,

musiałabym napisać:
class="catcolors".

Ale w JavaScript trzeba było
napisać: "className".

Do tego nie jesteśmy przyzwyczajeni!

Robimy to, bo "class" jest słowem
kluczowym w języku JavaScript

i ma szczególne znaczenie.

Z tego powodu
przeglądarki używają "className",

by odnieść się do atrybutu klasy
w HTML, żeby nic się nie pomyliło.

Pamiętajcie: chcąc ustanowić
atrybut klasy elementu,

piszecie ".className=".

Żeby przypisać to
każdej z nazw zwierząt,

możemy umieścić to w pętli:
"nameEls[i]."...

"className = "catColors".

To doda nazwę klasy,

ale usunie wszelkie klasy,
które były tu wcześniej,

bo napisaliśmy "=".

Jeśli więc były tu przedtem
jakiekolwiek klasy, teraz ich nie ma.

Klasy były: "class=animal".
Zmieniło się to w "catColors".

Tak naprawdę chcemy dodać
nową nazwę klasy

do tego atrybutu klasy.

Możemy to zrobić, pisząc:
"+= catColors".

Gotowe.

To bezpieczny sposób, bo program
bierze nazwę poprzedniej klasy,

dodaje spację i nową klasę.

W nowszych przeglądarkach zrobimy to,
używając własności "classList".

Piszemy zatem: "nameEls[i]"...

".classList"...

".add("catcolors")".

Teraz jest ładniej,
ale nie działa to wszędzie.

Jeśli chcecie tego używać,
wejdźcie na "caniuse.com" i sprawdźcie,

czy program obsługują przeglądarki,
z którymi ma współpracować wasza strona.

To ładniejsze, ale nie jest miło,
gdy strona się zacina,

bo używacie funkcji,
o której nie wie przeglądarka.

Zlikwiduję to.

Niech moja strona współpracuje
z wieloma przeglądarkami!

Często chcemy zmieniać
style poszczególne,

zamiast przypisywać nazwy klas.

Powtarzam: pamiętajcie,
że macie oba te narzędzia.

Decydujcie, które bardziej się przyda
w konkretnej sytuacji.