JavaScript: Współrzędne położenia elementu

0:00W tej lekcji pokażę Ci, w jaki sposób

0:02możemy odczytywać współrzędne położenia elementu względem jego rodzica, tzw.

0:07offset parent, ale także względem viewportu,

0:09czyli wszystkiego, co widzimy na ekranie.

0:11I w tym celu mamy dwa elementy.

0:13Mamy taki wrapper, to jest ten z czarnym borderem i wewnątrz

0:16taki box to jest ten taki pomarańczowy

0:19element i będę chciał odczytać ile jego lewa krawędzi jest oddalona tutaj od lewej

0:24strony, a także jego górna krawędź od góry.

0:27I pokażę Ci na to dwa sposoby i wytłumaczę czym się różnią.

0:29Natomiast do czego to może być przydatne? W bardzo wielu sytuacjach

0:33to może być przydatne i w tym kursie stworzymy później praktyczny projekt tooltipa,

0:38gdzie po najechaniu na jakiś element będziemy chcieli odczytać,

0:41gdzie znajduje się jego lewa krawędź, jaka jest jego szerokość i nad nim ustawić

0:46taki element tooltip. Więc to będzie naprawdę bardzo przydatne,

0:49w tej lekcji natomiast omówimy sposoby na

0:52to, jak te rzeczy odczytywać, a potem, kiedy będziemy tworzyć praktyczny projekt,

0:56już będziemy wiedzieli jak z tego skorzystać.

0:58Pobrałem sobie do stałej tutaj box,

1:02to jest właśnie ten element, to jest ten

1:04pomarańczowy, a to jest ten wrapper i będę chciał ci pokazać, jak odczytać jego lewą

1:08krawędź, czyli ile ona jest położona względem body

1:11w tym przypadku. Zrobimy sobie to w console.log

1:14i na dowolnym elemencie, który sobie znalazłeś na stronie

1:17możesz skorzystać z czegoś takiego jak

1:19offsetLeft i to w pikselach zwróci Ci odpowiednią wartość.

1:23Tutaj nam podświetla edytor, ale znowu to nie jest żaden błąd.

1:26To wynika z tego TypeScript sprawdzenia, więc to możemy zignorować.

1:31Jak widzimy jest to 258 pikseli, czyli odtąd tutaj jest 258.

1:36Jeżeli będziemy chcieli odczytać górną krawędź offset top to będzie to 164.

1:42No i właśnie teraz mógłbyś zapytać

1:43względem czego. Wydaje się, że względem całego dokumentu,

1:47bo jeżeli ja bym sobie tutaj spróbował

1:49zmierzyć, to takim narzędziem rzeczywiście widać, że to będzie 164.

1:56I tutaj na bok

1:58mniej więcej widzimy 258.

2:00Czyli to się zgadza, ale okazuje się, że te właściwości takie jak offsetTop i

2:04offsetLeft zwracają nam położenie względem tzw.

2:08offsetParent.

2:09I teraz co to oznacza?

2:11Kto jest tym offsetParent dla tego elementu?

2:13Możemy to sprawdzić wyświetlając w konsoli offsetParent.

2:18Zobaczmy.

2:19Jest to body. Czyli względem body, teraz po najechaniu widzimy jak wygląda body,

2:23to jest cały nasz dokument,

2:25więc te wartości były podane względem body.

2:27I teraz o co chodzi z offsetParent?

2:29Bo to też ma znaczenie w przypadku CSS.

2:31W momencie gdybyśmy do takiego elementu do

2:33tego boxa przypisali np. position absolute i następnie byśmy zrobili top np.

2:4050 pikseli, to jeżeli znasz CSS to wiesz, że on będzie pozycjonowany absolutnie 50px

2:46od góry względem właśnie jego offsetParent.

2:49Czyli w tym przypadku byłoby to body. Zobaczmy.

2:52Ten element byłby przesunięty w to miejsce.

2:55Natomiast jeżeli byśmy dla tego wrappera, który

2:59jest tutaj nad nim, bo ten element jest w tym wrapperze,

3:02jeżeli byśmy jemu przypisali np. position relative,

3:07to teraz on staje się tym offsetParent dla tego elementu i te 50 pikseli

3:12będzie od właśnie tego elementu, od jego górnej krawędzi.

3:15Zobacz teraz to będzie wyglądać inaczej.

3:17Czyli swoją drogą to też jest taki trick,

3:19że możesz sobie sprawdzić względem jakiego elementu będzie

3:22pozycjonowany inny element czyli jaki jest jego offsetParent.

3:26No właśnie i teraz jeżeli temu daliśmy

3:28position relative, to te wartości będą już względnie

3:32właśnie tego wrappera. Zobaczysz, że one się zmieniły na 20 i 30.

3:35Bo dokładnie gdybyśmy podejrzeli tutaj od góry będzie 30

3:40a tutaj z boku

3:42będzie 20.

3:43Zapamiętaj zatem, że offsetLeft i offsetTop

3:46zwracają wartości względem offsetParent, a samo to offsetParent

3:50zwraca nam właśnie odwołanie do tego elementu.

3:52Jak zwróciło body, to tutaj też pamiętaj,

3:55podobnie jak było w przypadku parentNode

3:57masz po prostu odwołanie do takiego elementu i na nim możesz wykonywać różne

4:00akcje tak jakbyś go znalazł z użyciem querySelector.

4:03Więc to nie jest żaden string, który nam się wyświetla.

4:06To jest prawdziwe odwołanie do elementu w drzewie DOM.

4:09Mamy jeszcze jedną metodę, która może się przydać w innych sytuacjach.

4:12Jest to getBoundingClientRect.

4:15Będziemy sobie chcieli taki obiekt, który

4:16zostanie zwrócony zapisać w takiej stałej pos jak positions

4:20i odwołamy się do box i na każdym innym elemencie możesz tego użyć i metoda

4:25getBoundingClientRect ją trzeba wywołać i ona zwraca obiekt.

4:29Zobaczmy sobie w konsoli co w tym obiekcie jest.

4:32Zobacz, jest to taki obiekt, który ma różne właściwości i jeżeli byśmy spojrzeli sobie

4:37np. na left to jest tutaj 258, czyli to co mieliśmy wcześniej

4:41a top 164. To mówi nam, że getBoundingClientRect zwraca nam obiekt, w którym mamy

4:48jeżeli chodzi o left i top, czyli te

4:50współrzędne położenia elementu, mamy je już nie względem jego offsetParent, czyli w

4:55tym przypadku teraz tego wrappera, ale względem viewportu, który widzimy.

4:59Czyli tutaj będzie to 258, tutaj 164.

5:03Ale to też nie do końca jest tak, że to

5:04jest od góry dokumentu, ale od góry viewportu. Czyli tutaj

5:08teraz nie możemy przescrollować, ale zobacz

5:10co by było, gdybyśmy powiedzieli, że body ma mieć wysokości np.

5:14niech będzie to 3000 pikseli.

5:17Dzięki temu moglibyśmy tutaj scrollować.

5:19I teraz jeżeli sobie trochę zescrollujemy to górna krawędź tego elementu

5:23tutaj nam pokazywało przy top, że jest to

5:25164 to już nie będzie liczona od samej góry tutaj, ale od viewportu.

5:31Czyli będzie to tylko ta wartość.

5:32I przy okazji pokażę Ci fajny trik, bo

5:34teraz jak odświeżę stronę to ten scroll nam się przesunie z powrotem do góry.

5:38Możemy sobie tutaj w panelu elements zaznaczyć dowolny element,

5:42będzie to ten box.

5:44Jak on jest zaznaczony to w konsoli pod

5:46dolar 0 mamy do niego odwołanie. Takie samo odwołanie jak tutaj w kodzie kiedy

5:50wyszukaliśmy sobie go z querySelector. Więc możemy na nim wykonać pewne akcje. I zróbmy

5:54sobie na nim getBoundingClientRect i zobaczmy jaki top zostanie zwrócony.

6:00Jak widzisz teraz top jest 152, czyli to

6:02będzie ta wartość dokładnie odtąd dotąd, a nie do góry całego dokumentu.

6:08Gdybyśmy chcieli pobrać wartość do góry

6:09całego dokumentu, to musielibyśmy sobie jeszcze pobrać ile zostało przezscrollowane

6:14a o tej pozycji suwaków powiemy sobie w jednej z kolejnych lekcji.

6:18Możesz zauważyć, że tutaj są jeszcze inne wartości, np.

6:20right 458.

6:22To oznacza, że ta krawędź prawa jest

6:24odsunięta od lewej strony viewportu o 458 pikseli.

6:29Mamy tutaj również szerokość tego elementu i jego wysokość,

6:32ale o tych wymiarach powiemy sobie jeszcze w jednej z kolejnych lekcji.

6:36Zatem na razie może Ci się wydawać, że te

6:38rzeczy są ciekawe, ale nie bardzo przydatne,

6:41niemniej jednak w tym kursie zobaczysz, że one będą wręcz niezbędne do tego, aby

6:45stworzyć tooltip, który będzie wyświetlany nad elementem, na który jedziemy.