WEBVTT

00:00:00.974 --> 00:00:06.113
Wiecie już, jak zmienić zawartość
elementu i wartości jego atrybutów.

00:00:06.213 --> 00:00:07.709
Co jeszcze zostało?

00:00:07.832 --> 00:00:11.215
A gdybyśmy chcieli zmienić styl?

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

00:00:14.252 --> 00:00:17.251
ale czasami wolimy w JavaScript

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

00:00:20.193 --> 00:00:23.212
lub zmieniać je,
gdy użytkownik na coś kliknie.

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

00:00:26.241 --> 00:00:29.466
Zmieńmy styl tego nagłówka.

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

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

00:00:35.764 --> 00:00:38.152
a potem napisalibyśmy:
"color: orange".

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

00:00:43.023 --> 00:00:47.589
Żeby to zrobić w JavaScript,
musimy znaleźć element "heading".

00:00:47.685 --> 00:00:48.878
Jest tutaj.

00:00:49.644 --> 00:00:54.613
Docieramy do jego atrybutu stylu
poprzez "style".

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

00:01:00.581 --> 00:01:03.320
i ustawiamy ją na nową wartość.

00:01:04.402 --> 00:01:08.405
Skasujmy własność w CSS,
żeby zobaczyć, czy się udało.

00:01:08.509 --> 00:01:09.915
Tak, udało się!

00:01:11.451 --> 00:01:14.967
Zauważcie, że tu są dwie kropki,

00:01:15.100 --> 00:01:17.775
bo wchodzimy do dwóch obiektów.

00:01:17.870 --> 00:01:22.175
Jeden z nich to obiekt elementu,
a drugi - obiekt stylu,

00:01:22.265 --> 00:01:27.246
zawierający wszystkie style tego
elementu zapisane jako różne własności.

00:01:27.346 --> 00:01:31.373
A gdybyśmy też chcieli
zmienić kolor tła?

00:01:31.473 --> 00:01:35.619
W CSS napisalibyśmy:
"background-color: black".

00:01:37.291 --> 00:01:39.210
Spróbujmy w JavaScript:

00:01:40.890 --> 00:01:43.452
"headingEl.style."...

00:01:43.552 --> 00:01:47.647
"background-color = "black".

00:01:49.319 --> 00:01:53.692
O, jest błąd!
To niewłaściwy kod w JavaScript,

00:01:53.787 --> 00:01:57.191
bo nazwy własności
nie mogą zawierać łączników.

00:01:57.283 --> 00:02:01.022
Musimy zmienić
tę nazwę własności w CSS

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

00:02:03.913 --> 00:02:06.645
Załatwimy to wielkością liter.

00:02:06.740 --> 00:02:10.425
Usuniemy łącznik i damy wielkie "C".

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

00:02:14.038 --> 00:02:15.650
Tak, nadal czarne.

00:02:16.974 --> 00:02:21.664
Rozkręcam się! Teraz chcę
zrobić wyrównanie do środka.

00:02:21.776 --> 00:02:25.864
Dodam jeszcze jeden wiersz:

00:02:26.610 --> 00:02:30.836
"headingEl.style.textAlign".

00:02:30.927 --> 00:02:33.832
Łącznik na wielką literę...
i "= center".

00:02:33.965 --> 00:02:37.617
Powtarzam: wielka litera
zamiast łącznika.

00:02:37.747 --> 00:02:41.702
Teraz nagłówek kojarzy się z kotem

00:02:41.778 --> 00:02:44.350
i z Halloween. Tak!