Wiecie już, jak zmienić zawartość
elementu i wartości jego atrybutów.
Co jeszcze zostało?
A gdybyśmy chcieli zmienić styl?
Normalnie zrobilibyśmy to w CSS,
ale czasami wolimy w JavaScript
- np. gdy chcemy animować style
lub zmieniać je,
gdy użytkownik na coś kliknie.
Wkrótce to zobaczycie, obiecuję!
Zmieńmy styl tego nagłówka.
Gdybyśmy zrobili to w CSS,
kazalibyśmy wybrać "#heading" po ID,
a potem napisalibyśmy:
"color: orange".
Hura, jest! Pomarańczowy jak kot!
Żeby to zrobić w JavaScript,
musimy znaleźć element "heading".
Jest tutaj.
Docieramy do jego atrybutu stylu
poprzez "style".
Później wchodzimy do właściwości,
która nas interesuje ("color")
i ustawiamy ją na nową wartość.
Skasujmy własność w CSS,
żeby zobaczyć, czy się udało.
Tak, udało się!
Zauważcie, że tu są dwie kropki,
bo wchodzimy do dwóch obiektów.
Jeden z nich to obiekt elementu,
a drugi - obiekt stylu,
zawierający wszystkie style tego
elementu zapisane jako różne własności.
A gdybyśmy też chcieli
zmienić kolor tła?
W CSS napisalibyśmy:
"background-color: black".
Spróbujmy w JavaScript:
"headingEl.style."...
"background-color = "black".
O, jest błąd!
To niewłaściwy kod w JavaScript,
bo nazwy własności
nie mogą zawierać łączników.
Musimy zmienić
tę nazwę własności w CSS
na formę, która zadziała w JavaScript.
Załatwimy to wielkością liter.
Usuniemy łącznik i damy wielkie "C".
Sprawdźmy to, kasując tę własność.
Tak, nadal czarne.
Rozkręcam się! Teraz chcę
zrobić wyrównanie do środka.
Dodam jeszcze jeden wiersz:
"headingEl.style.textAlign".
Łącznik na wielką literę...
i "= center".
Powtarzam: wielka litera
zamiast łącznika.
Teraz nagłówek kojarzy się z kotem
i z Halloween. Tak!