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.