JavaScript: Praca z liniowym CSS

0:00Wszędzie tam, gdzie możesz zmienić wygląd

0:02strony internetowej lub jakiegoś elementu za pomocą dodania lub usunięcia klasy CSS,

0:07powinieneś to robić. Czyli wcześniej w kodzie CSS zdefiniować sobie klasy

0:11odpowiedzialne za wygląd i z użyciem JavaScript te klasy dodawać lub usuwać.

0:16Natomiast czasami są takie sytuacje, że

0:18chcemy przypisać liniowe style do elementów.

0:21I mówiąc liniowe mam na myśli tak jakbyśmy

0:23tutaj do tego paragrafu przypisali po prostu style i np.

0:27line -height 30 pikseli itd.

0:31Taki konkretny przykład może nie jest najlepszy, ale są czasami takie sytuacje,

0:36gdzie chcemy tutaj coś przypisać dynamicznie i będą to np.

0:40jakieś rzeczy związane z pozycjonowaniem absolutnym takie jak np.

0:43top 126 px itd.

0:47I to mogą być jakieś wartości wyliczone dynamicznie z użyciem języka JavaScript,

0:52co jeszcze będziemy później robić w tym kursie.

0:54Wyobraź sobie np.

0:55że możemy kliknąć na jakiś element i go przeciągać.

0:58Na pewno wielokrotnie spotkałeś się w

1:00przeglądarkach internetowych z czymś takim.

1:03To działa w ten sposób, że będziemy odczytywać pozycję kursora myszy

1:08i na podstawie tej pozycji przypisywać odpowiednie atrybuty, takie jak np.

1:12top czy left do danego elementu.

1:14My w tej lekcji nie będziemy robić takiego

1:16zaawansowanego przykładu, ale chcę Ci właśnie wyjaśnić, kiedy musimy skorzystać

1:21z takich styli, a kiedy możemy korzystać z klas.

1:24Czyli nie możemy skorzystać z klas, kiedy potrzebujemy dynamicznie wyliczyć np.

1:29pozycję jakiegoś elementu i takie style musimy ustawić, bo nie jesteśmy w stanie

1:33wcześniej określić w klasie właśnie takich wartości jak top 126 pikseli.

1:38Czyli czasami zachodzi taka potrzeba, aby

1:40przypisać style liniowe do danego elementu.

1:43I w tej lekcji pokażę Ci jak możemy to zrobić. Żeby nie tracić czasu

1:47tutaj pobrałem sobie już do stałych jak

1:49widzisz odpowiednie elementy i na nich będziemy chcieli sobie pracować.

1:53Więc żeby przypisać liniowe style np.

1:55do elementu h1 powiedzmy, że chcę zmienić jego kolor, ale tak jak wspomniałem takimi

2:00rzeczami zajęli byśmy się raczej w CSS i dodawali byśmy odpowiednią klasę.

2:05Niemniej jednak zasada przypisywania dowolnych właściwości CSS jest taka sama,

2:10więc odwołuję się do h1 i mamy właściwość style.

2:14To jest taki specjalny obiekt, który będzie miał różne właściwości

2:18i mogę powiedzieć kolor równa się i przypisać mu wartości np.

2:22kolor czerwony.

2:24Zobacz co się stanie jak zapiszę, ta h1

2:29powinna mieć kolor czerwony.

2:30OK, tak się nie stało, więc sprawdźmy dlaczego.

2:33OK, dlatego, że podałem niepoprawną wartość.

2:35To powinno być jeszcze jedno zero.

2:37Teraz jak sobie odświeżmy

2:39jak widzisz jak najbardziej tutaj jest

2:40kolor czerwony i ten styl został tutaj przypisany.

2:43Przeglądarka zamieniła go na inną notację, ale to nie ma żadnego znaczenia.

2:47No i dokładnie w ten sam sposób moglibyśmy

2:49przypisać wspomniane wcześniej właściwości np.

2:52top czy left.

2:53Jeżeli chcemy ich przypisać więcej, to

2:55musielibyśmy ponowić tą linijkę pod spodem i przypisać jakąś inną właściwość.

2:59Więc spróbujmy zrobić np.

3:01style.font-size.

3:03I teraz od razu ważna uwaga, nie możemy tego zapisać tak jak nazwa właściwości w

3:06CSS, bo ta pauza będzie potraktowana jako minus.

3:10Więc tutaj albo musimy się odwołać tak jak to w obiektach już w tym kursie

3:14pokazywałem w ten sposób do właściwości i ją przypisać tutaj albo możemy skorzystać

3:19z notacji camelCase, która będzie wyglądała tak.

3:23A więc wszystkie właściwości CSS, które

3:24mają w sobie pauzę możesz zamienić właśnie na taką notację.

3:28I teraz przypiszemy sobie tutaj wartość np.

3:3120 pikseli.

3:32Ważne, żeby podać tutaj jednostki.

3:34I przy okazji jak widzisz zawsze te

3:36wartości to będą po prostu wartości typu string.

3:39OK, jak sobie coś takiego zapiszemy, od razu ten nagłówek się zmniejszył

3:44i jak widzisz te style zostały również tutaj w dynamiczny sposób przypisane.

3:49Możemy również od razu przypisać więcej styli, ale wtedy musimy mieć świadomość,

3:52że te które już tam były zostaną nadpisane, czyli podobnie jak w przypadku className.

3:57Spróbujmy zrobić to na container.

4:00Możemy się odwołać do style

4:02i następnie do takiej specjalnej właściwości jak cssText.

4:06Wtedy przypiszemy cały ciąg czy cały

4:09kod CSS jaki chcemy tutaj dodać i mogę powiedzieć np.width

4:13600 px i od razu powiedzmy margin

4:160 auto. Coś w tym stylu i to zostanie przypisane do naszego kontenera.

4:21Zauważ, że on teraz został wyśrodkowany.

4:23Dokładnie tak się stało, że te style zostały tutaj przypisane, ale gdyby jakieś

4:27inne tam były, zostałyby nadpisane właśnie takim ciągiem.

4:32Mamy na stronie również dwa paragrafy i

4:34chciałbym Ci pokazać, że na nich możemy bez problemu wykonać pętle,

4:37gdybyśmy im wszystkim chcieli przypisać na przykład lineHeight, czyli pobrałem je za

4:41pomocą querySelectorAll co zwraca nam kolekcję.

4:44Na kolekcjach moglibyśmy wykonać jakąś pętlę, taką standardową pętlę for np.

4:50i jest mniejsze od p.length i

4:52i + +

4:56czyli chcę przeiterować po wszystkich tych paragrafach i następnie odwołam się do p[i], co zwróci mi

5:01pierwszy taki paragraf, potem drugi, no i tyle generalnie ile ich będzie.

5:05Następnie do właściwości style.lineHeight

5:08również w notacji camelCase ustawimy na 30 pikseli. Więc to jest

5:12sposób na to, aby wszystkim elementom, które masz pobrane z użyciem querySelectorAll

5:16przypisać jakieś style, a nie tylko pierwszemu elementowi, tak jak to

5:20się dzieje, kiedy korzystamy z querySelector.

5:23Zauważ teraz wszystkie paragrafy na stronie również otrzymały takie style.

5:27Teraz mógłbyś zapytać w jaki sposób usuwać takie style?

5:30Bo jeżeli dodamy line-height, to jak go

5:32teraz wyczyścić w taki sposób, żeby nie był już brany pod uwagę?

5:37I wtedy pod uwagę będzie wzięty line-height,

5:39który jest zdefiniowany w jakimś arkuszu styli.

5:42Bo takie liniowe style oczywiście mają

5:43pierwszeństwo przed tymi, które są gdzieś tam zdefiniowane w dodatkowych arkuszach.

5:48Otóż wystarczy taką wartość ustawić na pusty ciąg znaków.

5:52I teraz pokażę Ci to może w przypadku display block, bo mamy również na stronie

5:57pewien link i to jest coś, z czego bardzo często korzystam.

6:00Wyobraź sobie, że do jakiegoś elementu przypiszesz np.

6:03style.display block

6:09i to jest powiedzmy po to, żeby pokazać taki element,

6:11bo załóżmy, że ten element byłby ukryty. Przypiszmy mu np.

6:16klasę link

6:19i zrobimy coś takiego, że dodamy sobie tutaj style

6:23i powiemy, że link jest domyślnie ukryty, czyli ma display none, a więc my go nie

6:27widzimy i powiedzmy po kliknięciu w jakiś przycisk wykonali byśmy taką linijkę

6:31a więc ustawili byśmy style.display block.

6:34Ten element by się pokazał. I potem powiedzmy jeszcze raz kliknęlibyśmy w

6:38jakiś przycisk i chcielibyśmy go ukryć to nie musimy mu przypisywać już display

6:42noon, tylko wystarczy, że zresetujemy tę wartość.

6:46Czyli moglibyśmy to zrobić np.

6:47w ten sposób link.style.display i ustawiamy na taką wartość.

6:52To sprawi, że oryginalne style, które

6:54gdzie indziej są zdefiniowane, zostaną przypisane.

6:57Zobaczmy. Po odświeżeniu ten element znika i jak

7:00sobie zerkniemy, to nie ma na nim żadnych naszych styli.

7:03Mamy tutaj tylko taki pusty atrybut, bo ustawiliśmy display na pustą wartość i

7:07teraz pod uwagę brane jest to co zdefiniowałem przed momentem.

7:10Możesz to zobaczyć w tym miejscu.

7:13Na koniec pokażę Ci jeszcze jak możemy

7:15odczytywać style aktualnie przypisane do elementu, czyli jak mamy ten element link

7:19i bym tego nie usunął to mógłbym w console.log zrobić link.style.display

7:25i odczytali byśmy jaka jest aktualna wartość właśnie takiego stylu.

7:30Zobaczmy to nam zwróci blok.

7:32Ale pytanie co by było gdybym chciał

7:34zapytać jaki jest aktualny kolor tego elementu?

7:37Czy mogę się odwołać do kolor?

7:39Tak po prostu?

7:40Zobaczmy.

7:41Okazuje się, że zostaje tutaj zwrócony

7:43pusty ciąg, dlatego, że w ten sposób możemy odczytać tylko style przypisane w

7:47tym atrybucie, a nie ogólnie jakie style są dostępne na elemencie.

7:51Natomiast mamy ciekawą metodę na obiekcie

7:54Window, która nazywa się Get Computer Style i ona pozwala nam odczytać wszystkie

7:59style, które są zaaplikowane do tego elementu.

8:01Bo zauważ, że on ma jakiś kolor,

8:03a to oznacza, że możemy ten kolor odczytać i ten kolor jest zdefiniowany gdzieś

8:07zupełnie indziej. Więc możemy zrobić coś takiego.

8:10Zrobimy console.log i w środku window.getComputedStyle,

8:14tutaj przekazujemy odwołanie do elementu. Więc mamy odwołanie do linku tutaj

8:18i następnie to zwraca nam taki duży obiekt, gdzie są wszystkie wyliczone style

8:22dla tego elementu i możemy po właściwości odwołać się np.

8:26do color.

8:27Zobacz jak to będzie wyglądać w konsoli.

8:29Teraz ten kolor został zwrócony. Natomiast

8:31on może być zwrócony właśnie w takiej notacji rgb i jako string,

8:35ale jak widzisz on jest.

8:36Jeżeli bym się odwołał do fontSize,

8:38również dowiedzielibyśmy się jaki fontSize jest tam aktualnie ustawiony.

8:43To zatem tyle. Czyli podsumowując ja w tej lekcji

8:45pokazałem jak przypisać style takie jak fontSize czy color,

8:49natomiast tak naprawdę w większości przypadków to można załatwić odpowiednią

8:53klasą CSS a takie style za pomocą atrybutu style,

8:57czy takiej właściwości, czyli liniowe

8:59style będziemy przypisywać wszędzie tam, gdzie będziemy potrzebowali jakiś

9:03dynamicznych wartości, które będą wyliczane,

9:06czyli na przykład

9:06tak jak wspomniałem, aby chwycić i przeciągać jakiś element, będziemy

9:10odczytywać pozycję kursora myszy i na jej podstawie manipulować np.

9:14właściwością top i left, kiedy element będzie miał position absolute.

9:18W ten sposób ten element na stronie będzie się przesuwał.