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!