Return to Video

Edytowanie stylów CSS (Wersja Wideo)

  • 0:01 - 0:06
    Wiecie już, jak zmienić zawartość
    elementu i wartości jego atrybutów.
  • 0:06 - 0:08
    Co jeszcze zostało?
  • 0:08 - 0:11
    A gdybyśmy chcieli zmienić styl?
  • 0:11 - 0:14
    Normalnie zrobilibyśmy to w CSS,
  • 0:14 - 0:17
    ale czasami wolimy w JavaScript
  • 0:17 - 0:20
    - np. gdy chcemy animować style
  • 0:20 - 0:23
    lub zmieniać je,
    gdy użytkownik na coś kliknie.
  • 0:23 - 0:26
    Wkrótce to zobaczycie, obiecuję!
  • 0:26 - 0:29
    Zmieńmy styl tego nagłówka.
  • 0:30 - 0:31
    Gdybyśmy zrobili to w CSS,
  • 0:31 - 0:36
    kazalibyśmy wybrać "#heading" po ID,
  • 0:36 - 0:38
    a potem napisalibyśmy:
    "color: orange".
  • 0:38 - 0:41
    Hura, jest! Pomarańczowy jak kot!
  • 0:43 - 0:48
    Żeby to zrobić w JavaScript,
    musimy znaleźć element "heading".
  • 0:48 - 0:49
    Jest tutaj.
  • 0:50 - 0:55
    Docieramy do jego atrybutu stylu
    poprzez "style".
  • 0:55 - 1:00
    Później wchodzimy do właściwości,
    która nas interesuje ("color")
  • 1:01 - 1:03
    i ustawiamy ją na nową wartość.
  • 1:04 - 1:08
    Skasujmy własność w CSS,
    żeby zobaczyć, czy się udało.
  • 1:09 - 1:10
    Tak, udało się!
  • 1:11 - 1:15
    Zauważcie, że tu są dwie kropki,
  • 1:15 - 1:18
    bo wchodzimy do dwóch obiektów.
  • 1:18 - 1:22
    Jeden z nich to obiekt elementu,
    a drugi - obiekt stylu,
  • 1:22 - 1:27
    zawierający wszystkie style tego
    elementu zapisane jako różne własności.
  • 1:27 - 1:31
    A gdybyśmy też chcieli
    zmienić kolor tła?
  • 1:31 - 1:36
    W CSS napisalibyśmy:
    "background-color: black".
  • 1:37 - 1:39
    Spróbujmy w JavaScript:
  • 1:41 - 1:43
    "headingEl.style."...
  • 1:44 - 1:48
    "background-color = "black".
  • 1:49 - 1:54
    O, jest błąd!
    To niewłaściwy kod w JavaScript,
  • 1:54 - 1:57
    bo nazwy własności
    nie mogą zawierać łączników.
  • 1:57 - 2:01
    Musimy zmienić
    tę nazwę własności w CSS
  • 2:01 - 2:04
    na formę, która zadziała w JavaScript.
  • 2:04 - 2:07
    Załatwimy to wielkością liter.
  • 2:07 - 2:10
    Usuniemy łącznik i damy wielkie "C".
  • 2:11 - 2:14
    Sprawdźmy to, kasując tę własność.
  • 2:14 - 2:16
    Tak, nadal czarne.
  • 2:17 - 2:22
    Rozkręcam się! Teraz chcę
    zrobić wyrównanie do środka.
  • 2:22 - 2:26
    Dodam jeszcze jeden wiersz:
  • 2:27 - 2:31
    "headingEl.style.textAlign".
  • 2:31 - 2:34
    Łącznik na wielką literę...
    i "= center".
  • 2:34 - 2:38
    Powtarzam: wielka litera
    zamiast łącznika.
  • 2:38 - 2:42
    Teraz nagłówek kojarzy się z kotem
  • 2:42 - 2:44
    i z Halloween. Tak!
Title:
Edytowanie stylów CSS (Wersja Wideo)
Description:

To tylko zapis naszych interaktywnych sesji poświęconych kodowaniu, stworzony by ułatwić ich przełożenie na inne języki.
Polecamy obejrzenie oryginalnej sesji na Khan Academy, gdzie możecie zatrzymać sesje, by edytować własny kod, jak również zobaczyć zapis kodu w wyższej rozdzielczości:
http://www.khanacademy.org/computer-programming
more » « less
Video Language:
English
Duration:
02:46

Polish subtitles

Revisions

Our website uses cookies for analysis purposes.