0:00:00.974,0:00:06.113
Wiecie już, jak zmienić zawartość[br]elementu i wartości jego atrybutów.

0:00:06.213,0:00:07.709
Co jeszcze zostało?

0:00:07.832,0:00:11.215
A gdybyśmy chcieli zmienić styl?

0:00:11.315,0:00:14.137
Normalnie zrobilibyśmy to w CSS,

0:00:14.252,0:00:17.251
ale czasami wolimy w JavaScript

0:00:17.366,0:00:20.108
- np. gdy chcemy animować style

0:00:20.193,0:00:23.212
lub zmieniać je,[br]gdy użytkownik na coś kliknie.

0:00:23.312,0:00:26.141
Wkrótce to zobaczycie, obiecuję!

0:00:26.241,0:00:29.466
Zmieńmy styl tego nagłówka.

0:00:29.605,0:00:31.350
Gdybyśmy zrobili to w CSS,

0:00:31.446,0:00:35.642
kazalibyśmy wybrać "#heading" po ID,

0:00:35.764,0:00:38.152
a potem napisalibyśmy:[br]"color: orange".

0:00:38.252,0:00:41.168
Hura, jest! Pomarańczowy jak kot!

0:00:43.023,0:00:47.589
Żeby to zrobić w JavaScript,[br]musimy znaleźć element "heading".

0:00:47.685,0:00:48.878
Jest tutaj.

0:00:49.644,0:00:54.613
Docieramy do jego atrybutu stylu[br]poprzez "style".

0:00:55.346,0:01:00.481
Później wchodzimy do właściwości,[br]która nas interesuje ("color")

0:01:00.581,0:01:03.320
i ustawiamy ją na nową wartość.

0:01:04.402,0:01:08.405
Skasujmy własność w CSS,[br]żeby zobaczyć, czy się udało.

0:01:08.509,0:01:09.915
Tak, udało się!

0:01:11.451,0:01:14.967
Zauważcie, że tu są dwie kropki,

0:01:15.100,0:01:17.775
bo wchodzimy do dwóch obiektów.

0:01:17.870,0:01:22.175
Jeden z nich to obiekt elementu,[br]a drugi - obiekt stylu,

0:01:22.265,0:01:27.246
zawierający wszystkie style tego[br]elementu zapisane jako różne własności.

0:01:27.346,0:01:31.373
A gdybyśmy też chcieli[br]zmienić kolor tła?

0:01:31.473,0:01:35.619
W CSS napisalibyśmy:[br]"background-color: black".

0:01:37.291,0:01:39.210
Spróbujmy w JavaScript:

0:01:40.890,0:01:43.452
"headingEl.style."...

0:01:43.552,0:01:47.647
"background-color = "black".

0:01:49.319,0:01:53.692
O, jest błąd![br]To niewłaściwy kod w JavaScript,

0:01:53.787,0:01:57.191
bo nazwy własności[br]nie mogą zawierać łączników.

0:01:57.283,0:02:01.022
Musimy zmienić[br]tę nazwę własności w CSS

0:02:01.085,0:02:03.760
na formę, która zadziała w JavaScript.

0:02:03.913,0:02:06.645
Załatwimy to wielkością liter.

0:02:06.740,0:02:10.425
Usuniemy łącznik i damy wielkie "C".

0:02:10.542,0:02:13.909
Sprawdźmy to, kasując tę własność.

0:02:14.038,0:02:15.650
Tak, nadal czarne.

0:02:16.974,0:02:21.664
Rozkręcam się! Teraz chcę[br]zrobić wyrównanie do środka.

0:02:21.776,0:02:25.864
Dodam jeszcze jeden wiersz:

0:02:26.610,0:02:30.836
"headingEl.style.textAlign".

0:02:30.927,0:02:33.832
Łącznik na wielką literę...[br]i "= center".

0:02:33.965,0:02:37.617
Powtarzam: wielka litera[br]zamiast łącznika.

0:02:37.747,0:02:41.702
Teraz nagłówek kojarzy się z kotem

0:02:41.778,0:02:44.350
i z Halloween. Tak!