JavaScript: Wymiary elementu

0:00Teraz zajmiemy się odczytywaniem wymiarów elementu, czyli szerokość i wysokość.

0:05I na początek zajmiemy się tym elementem tutaj

0:07wewnątrz. Jest to przykład bardzo podobny

0:08jak w akcji poprzedniej, więc pobrałem sobie ten box do stałej i

0:12będę chciał odczytać sobie na początek jego szerokość i wysokość

0:16jedną z metod. Tych metod jest kilka

0:18i będę chciał omówić czym one się od siebie różnią.

0:21Więc taką podstawową metodą, z której

0:23zazwyczaj możesz korzystać jest offsetWidth.

0:27W zasadzie to nawet nie jest metoda.

0:28Jest to właściwość, którą można odczytać i zostanie nam zwrócona wartość o typie number,

0:34więc możemy spokojnie w JavaScript wtedy wykonywać różne obliczenia czy dodawać te

0:38wartości i będzie to wartość wyrażona w pikselach.

0:41Więc zobaczmy.

0:42Wychodzi na to, że ten element ma 200px,

0:44więc jeżeli chodzi o jego wysokość będzie to offsetHeight,

0:50zobaczmy, jest to również 200 pikseli i

0:53zgadza się to z tym, co jest tutaj przypisane

0:55oczywiście w CSS. Mamy również takie właściwości jak clientWidth

0:59i clientHeight i w przypadku tego boxa one zwrócą identyczne wartości.

1:03Dlatego spróbujmy je wykonać na tym wrapperze, który mamy tutaj wyżej.

1:07Czyli zrobimy sobie wrapper.offsetHeight

1:11najpierw albo offsetWidth i w zasadzie z Height będzie tak samo.

1:19Zobaczmy jakie nam zwróci wartości, zobacz,

1:22jest to 600 na 600 i to jest właśnie ten większy element, ale on ma border 2px

1:27tutaj i tutaj też ma 2 px, więc zobaczmy co się stanie w momencie, kiedy

1:31chciałbym skorzystać ze wspomnianych wcześniej clientWidth

1:37i zróbmy sobie

1:40clientHeight. Bo wspomniałem, że w przypadku

1:43tego boxa to byłyby identyczne wartości, a w przypadku tego wrappera nie

1:47I pytanie dlaczego?

1:48Zobacz jest to 596 na 596.

1:52I teraz chodzi o to, że offsetWidth,

1:54i offsetHeight zwracają szerokość i wysokość, która uwzględnia padding.

1:58Czyli jeśli ten element ma jakiś padding,

2:00uwzględnia także border, a także scrollbar, który mógłby być tutaj w środku.

2:05Natomiast w przypadku clientWidth

2:07i clientHeight nie jest uwzględniany border i nie są uwzględniane scrollbary.

2:12W obu tych metodach, czyli i w offsetWidth i clientWidth, a także Height

2:18nie jest również uwzględniany margines,

2:20czyli gdyby ten element miał jeszcze jakiś

2:21margines z tej strony, to nie jest brane do jego szerokości.

2:24A więc tutaj jest taka subtelna różnica,

2:26acz myślę, że istotna i w większości przypadków będziemy chcieli sobie pobrać jednak

2:30całą szerokość danego elementu, a nie wykluczać z niej np.

2:34marginesów.

2:35Dlatego zazwyczaj będziemy korzystać z metody offsetWidth i offsetHeight.

2:39Natomiast metoda clientHeight jak widzisz

2:41również działa, ale ona nam wyklucza border.

2:45Być może w poprzedniej lekcji zauważyłeś,

2:47że kiedy skorzystaliśmy z getBoundingClientRect to tam również były

2:50informacje odnośnie szerokości i wysokości elementu.

2:54Więc spróbujmy sobie to teraz odczytać.

2:56Odwołamy się do

2:57box.getBoundingClientRect, to jest metoda,

2:59która zwraca obiekt, więc jak jest zwrócony to możemy na nim po kropce

3:03odwołać się do jego właściwości. I zobaczmy sobie width oraz zróbmy to samo dla height.

3:10I to będzie dla tego boxa dla tego, który jest w środku.

3:12Zobacz zwróciło 200 na 200.

3:14Czyli można byłoby pomyśleć, że to znowu

3:16zwraca nam identyczne wartości jak offsetWidth i offsetHeight.

3:20Jednak jest tutaj jedna subtelna różnica, o której również warto wiedzieć, więc

3:23polecam Ci, żebyś sobie być może to zanotował.

3:26Chodzi o to, że jeżeli mamy taki element i zaaplikujemy do niego jakieś CSS -owe

3:31transformacje, czyli mamy tego boxa i jeśli teraz bym powiedział transform np.

3:37scale czyli chcę go powiększyć o 1,5

3:40zauważ, że on się powiększył i teraz jeżeli bym sobie go tutaj

3:43zaznaczył w konsoli do niego będziemy mieli odwołanie pod dolar 0

3:47i odczytamy sobie jego offsetWidth, zobacz nadal pokazuje, że jest to 200.

3:51Podobnie będzie z offsetHeight.

3:53Natomiast jeżeli odczytamy jego getBoundingClientRect width,

3:57to zwróci nam już 300 i podobnie będzie z height. Czyli innymi słowy metoda

4:02getBoundingClientRect zwraca nam zawsze faktyczne wymiary tego elementu,

4:07jakie są widoczne na ekranie. I czasami jest to właśnie pożądany przez

4:12nas efekt. Bo zazwyczaj nie wiemy też, czy zostały do elementu zaaplikowane jakieś

4:16transformacje czy nie, bo dzieje się to z użyciem CSS.

4:19A zatem można powiedzieć, że najbezpieczniej będzie odczytywać wymiary

4:23elementu z użyciem getBoundingClientRect i wtedy width i height.

4:28Następną rzeczą, którą chcę Ci pokazać, ja tutaj odświeżę, żeby to przestało działać,

4:32jest coś takiego jak scrollWidth i scrollHeight.

4:35Tutaj nie mamy żadnego scrolla, ale

4:36gdybyśmy zrobili tak, że ten element box byłby jakoś bardzo wysoki i np.

4:41miałby 2000 pikseli, a do tego elementu wrapper dostalibyśmy overflow

4:48scroll, to wtedy będziemy mogli wewnątrz scrollować.

4:52Bo ten element jest zbyt duży, więc tak naprawdę rozciąga nam tego wrappera.

4:57I teraz jeżeli na tym wrapperze byśmy się

4:58odwołali i zrobimy sobie to również w konsoli, to jego dolar zero

5:03scrollWidth, pokaże nam to 596, czyli zwraca taką samą wartość jak clientWidth,

5:10ale jeżeli się odwołamy do scrollHeight, bo tutaj zauważ nie mamy poziomego suwaka,

5:14ale też mógłby być, to scrollHeight pokaże nam 2030 pikseli.

5:19Czyli jeżeli chciałbyś sobie odczytać jakby

5:21całą wielkość tego elementu nie taką jak jest widoczna na ekranie, ale jaka jest

5:25fizycznie, bo on jest przewijamy, czyli można powiedzieć, że jest znacznie

5:28dłuższy ten element, to możesz to zrobić z użyciem scrollHeight.

5:32Ja dodam teraz tutaj te dwie metody

5:36żebyś

5:38również mógł sobie to w plikach źródłowych podejrzeć.

5:42I są sytuacje, kiedy to również będzie bardzo przydatne np.

5:45kiedy będziemy chcieli sprawdzić czy jakiś element posiada scrollbar. Nie ma do tego

5:49innej metody, ale jeżeli sobie sprawdzimy czy jego scrollHeight jest większe od

5:53jego clientHeight, no to oznacza, że ten element ma jakiś scrollbar. I na tej

5:58podstawie czasami chcemy zaaplikować trochę inne style itd.

6:02I ostatnia rzecz, którą chciałbym Ci pokazać dotyczy stricte obiektu window.

6:06Jeżeli chcielibyśmy sprawdzić jakich

6:08wymiarów jest nasze okno, czyli tak naprawdę viewport,

6:11nawet nie cały dokument, bo większość stron internetowych jest scrollowalna w dół

6:14możemy dużo przeskalować, to cały ten dokument będzie wysoki,

6:18ale samo window to będzie dokładnie to, co

6:20tutaj widzimy teraz na ekranie, czyli ten viewport, to

6:23mamy do tego dwie właściwości na obiekcie

6:25window i jest to window.innerWidth to będzie szerokość i innerHeight.

6:34Czyli one są dostępne tylko na tym

6:36obiekcie window wyglądają troszeczkę inaczej bo

6:38mamy inneWidth, innerHeight, zobaczmy,

6:40zwróci nam to 1072 i 1001

6:43jeżeli chodzi o wysokość. To może być z kolei przydatne, jeżeli

6:46chciałbyś warunkowo coś zrobić na stronie, np.

6:49sprawdzić sobie, czy jeżeli strona jest

6:51mniejsza niż powiedzmy 1000 pikseli to chcesz coś zrobić inaczej.

6:55Oczywiście jeśli chodzi o kwestie czysto stylowe, to możemy to zrobić z użyciem

7:00media queries w CSS, ale często również w języku JavaScript

7:03potrzebujemy znać te wymiary, aby podjąć na tej podstawie jakąś decyzję.

7:08Podsumowując, zazwyczaj będziesz mógł

7:10odczytywać szerokość i wysokość za pomocą offsetWidth, ale bezpieczniej jest to

7:14robić za pomocą getBoundingClientRect na wypadek gdyby elementy były w jakiś sposób

7:19przetransformowane i fizycznie na stronie były większe.

7:22Natomiast rzadziej będziesz prawdopodobnie

7:23korzystał z clientWidth i clientHeight, bo tutaj są odejmowane bordery

7:28i czasami możesz również korzystać ze scrollWidth i scrollHeight, kiedy chcesz poznać

7:32prawdziwe wymiary elementu, czyli ile tej treści w nim się znajduje.