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.