1
00:00:00,974 --> 00:00:06,113
Wiecie już, jak zmienić zawartość
elementu i wartości jego atrybutów.

2
00:00:06,213 --> 00:00:07,709
Co jeszcze zostało?

3
00:00:07,832 --> 00:00:11,215
A gdybyśmy chcieli zmienić styl?

4
00:00:11,315 --> 00:00:14,137
Normalnie zrobilibyśmy to w CSS,

5
00:00:14,252 --> 00:00:17,251
ale czasami wolimy w JavaScript

6
00:00:17,366 --> 00:00:20,108
- np. gdy chcemy animować style

7
00:00:20,193 --> 00:00:23,212
lub zmieniać je,
gdy użytkownik na coś kliknie.

8
00:00:23,312 --> 00:00:26,141
Wkrótce to zobaczycie, obiecuję!

9
00:00:26,241 --> 00:00:29,466
Zmieńmy styl tego nagłówka.

10
00:00:29,605 --> 00:00:31,350
Gdybyśmy zrobili to w CSS,

11
00:00:31,446 --> 00:00:35,642
kazalibyśmy wybrać "#heading" po ID,

12
00:00:35,764 --> 00:00:38,152
a potem napisalibyśmy:
"color: orange".

13
00:00:38,252 --> 00:00:41,168
Hura, jest! Pomarańczowy jak kot!

14
00:00:43,023 --> 00:00:47,589
Żeby to zrobić w JavaScript,
musimy znaleźć element "heading".

15
00:00:47,685 --> 00:00:48,878
Jest tutaj.

16
00:00:49,644 --> 00:00:54,613
Docieramy do jego atrybutu stylu
poprzez "style".

17
00:00:55,346 --> 00:01:00,481
Później wchodzimy do właściwości,
która nas interesuje ("color")

18
00:01:00,581 --> 00:01:03,320
i ustawiamy ją na nową wartość.

19
00:01:04,402 --> 00:01:08,405
Skasujmy własność w CSS,
żeby zobaczyć, czy się udało.

20
00:01:08,509 --> 00:01:09,915
Tak, udało się!

21
00:01:11,451 --> 00:01:14,967
Zauważcie, że tu są dwie kropki,

22
00:01:15,100 --> 00:01:17,775
bo wchodzimy do dwóch obiektów.

23
00:01:17,870 --> 00:01:22,175
Jeden z nich to obiekt elementu,
a drugi - obiekt stylu,

24
00:01:22,265 --> 00:01:27,246
zawierający wszystkie style tego
elementu zapisane jako różne własności.

25
00:01:27,346 --> 00:01:31,373
A gdybyśmy też chcieli
zmienić kolor tła?

26
00:01:31,473 --> 00:01:35,619
W CSS napisalibyśmy:
"background-color: black".

27
00:01:37,291 --> 00:01:39,210
Spróbujmy w JavaScript:

28
00:01:40,890 --> 00:01:43,452
"headingEl.style."...

29
00:01:43,552 --> 00:01:47,647
"background-color = "black".

30
00:01:49,319 --> 00:01:53,692
O, jest błąd!
To niewłaściwy kod w JavaScript,

31
00:01:53,787 --> 00:01:57,191
bo nazwy własności
nie mogą zawierać łączników.

32
00:01:57,283 --> 00:02:01,022
Musimy zmienić
tę nazwę własności w CSS

33
00:02:01,085 --> 00:02:03,760
na formę, która zadziała w JavaScript.

34
00:02:03,913 --> 00:02:06,645
Załatwimy to wielkością liter.

35
00:02:06,740 --> 00:02:10,425
Usuniemy łącznik i damy wielkie "C".

36
00:02:10,542 --> 00:02:13,909
Sprawdźmy to, kasując tę własność.

37
00:02:14,038 --> 00:02:15,650
Tak, nadal czarne.

38
00:02:16,974 --> 00:02:21,664
Rozkręcam się! Teraz chcę
zrobić wyrównanie do środka.

39
00:02:21,776 --> 00:02:25,864
Dodam jeszcze jeden wiersz:

40
00:02:26,610 --> 00:02:30,836
"headingEl.style.textAlign".

41
00:02:30,927 --> 00:02:33,832
Łącznik na wielką literę...
i "= center".

42
00:02:33,965 --> 00:02:37,617
Powtarzam: wielka litera
zamiast łącznika.

43
00:02:37,747 --> 00:02:41,702
Teraz nagłówek kojarzy się z kotem

44
00:02:41,778 --> 00:02:44,350
i z Halloween. Tak!