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!