Pozycjonowanie elementów i odczytywanie pozycji na stronie cz. 3

code 2620118 1920 Pozycjonowanie elementów i odczytywanie pozycji na stronie cz. 3
4/5 - (1 vote)

Poza współrzędnymi położenia, mamy także wymiary obiektów – ich wysokości i szerokości. Odczytywanie tych właściwości może być niezbędne przy ustalaniu niektórych współrzędnych. Na przykład współrzędna dolnej krawędzi obiektu jest równa sumie współrzędnej jego górnej krawędzi i wysokości. Większość właściwości związanych z wymiarami jest odpowiednikami przedstawionych już właściwości dotyczących współrzędnych, będę więc często odsyłał do poprzedniej części artykułu, aby nie powtarzać opisanych tam problemów.

Autor: Paweł Rajewski

Szczęśliwie, wymiary obiektów kryją mniej pułapek niż współrzędne – nie zmieniają się tak często, są mniej zależne od położenia obiektu zarówno na stronie, jak i w kodzie. Jeśli element DIV ma szerokość 100px, to prawdopodobnie nie zmieni się to po jego przesunięciu lub zmianie rodzaju pozycjonowania.

Jednak i tu możliwe są sytuacje szczególne. Co najmniej część wymiarów zależy od zawartości obiektu. Jeśli zmienimy tekst wewnątrz paragrafu P (np. sposobem innerText czy innerHTML), to wysokość paragrafu może ulec zmianie. Z kolei szerokość może zmienić się po zmianie wymiarów okna, w którym wyświetlana jest strona. Możliwe też, że wymiary ulegną zmianie w wyniku innych działań np. ukrycia części strony z użyciem właściwości display.

Mówiąc o wymiarach, trzeba dokładnie precyzować, o której właściwości obiektu myślimy. Każdy obiekt ma kilka różnych wymiarów (i część z nich można odczytać w różnej formie z kilku miejsc). Mówiąc „szerokość” możemy mieć na myśli przestrzeń, którą zajmuje obiekt (łącznie z marginesami), albo szerokość samego obiektu (z uwzględnieniem obramowań albo bez nich), albo szerokość „okienka”, w którym obiekt wyświetla swoją zawartość (z uwzględnieniem pasków przewijania albo bez nich), albo wreszcie szerokość zawartości obiektu (która może być zarówno mniejsza, jak i większa od obiektu – w tym drugim przypadku mamy zwykle do dyspozycji paski przewijania). Wszystkie te wartości to różne „szerokości” tego samego elementu.

Trzeba też pamiętać, że różne modele Explorera definiują część wymiarów w różny sposób (patrz artykuł: „Internet Explorer a CSS”). Może się więc zdarzyć, że ten sam obiekt „zmierzony” na dwóch różnych przeglądarkach (a nawet w tej samej, ale na dwóch różnych stronach) będzie wykazywał różne wymiary.

Właściwości width i height

obiekt STYLE="width:sW;" 
obiekt STYLE="height:sH;" 

sH=obiekt.style.height; 
sW=obiekt.style.width; 

obiekt WIDTH="vW" 
obiekt HEIGHT="vH" 

vW=obiekt.width; 
vH=obiekt.height; 

Większość elementów HTML pozwala na ustawienie swoich wymiarów poprzez atrybut (obiekt) style. Niektóre posiadają też osobne atrybuty WIDTH i HEIGHT. Mimo, że w praktyce działają one identycznie (np. IMG WIDTH=”50″ i IMG STYLE=”width:50px;” dają ten sam efekt), to mamy tu do czynienia z dwiema różnymi właściwościami, które nie zawsze są zamienne. Generalnie, ustawianie wymiarów poprzez obiekt style jest „nowocześniejsze” i elastyczniejsze – umożliwia stosowanie różnych jednostek, nie tylko pikseli i procentów, a także bardziej zaawansowane sztuczki, jak użycie wyrażeń zamiast wartości.

Atrybuty „bezpośrednie” – WIDTH i HEIGHT to rozwiązania starsze i mniej elastyczne (pochodzą z poprzednich wersji HTML), ale wciąż oferujące kilka ciekawych właściwości. W przypadku elementów IMG i FRAME jest to samoczynne przeliczanie podanych wartości na piksele. Jeśli podamy np.:

<IMG SRC="obrazek.gif" WIDTH="20%" 
onclick="alert(this.width);"> 

…to po kliknięciu otrzymamy szerokość obrazka w pikselach zamiast oczekiwanej wartości 20%. Co więcej, jeśli nie wpiszemy atrybutu WIDTH lub HEIGHT wcale, to i tak zostanie mu przypisana wartość odpowiadająca bieżącym wymiarom obrazka lub ramki! Zmieńmy w powyższym kodzie zapis onclick na: onclick=”alert(this.height);”, a po kliknięciu dowiemy się ile wynosi aktualna wysokość obrazka. Ba, jeśli zmieni się wymiar ramki lub obrazka, np. po zmianie rozmiaru okna, to wartości WIDTH i HEIGHT zostaną również uaktualnione! Do tego zachowania nie należy się jednak przyzwyczajać – nie działa to w przypadku elementów innych niż IMG i FRAME, a więc komórek, ramek IFRAME itd.

Z kolei właściwości dostępne poprzez obiekt style zwracają tylko to, co do nich wpisaliśmy. Jeśli wymiary obiektu ustawiliśmy bez użycia zapisu STYLE=”…” (np. importując je z arkusza stylów zapisem CLASS=”…”), to obiekt style będzie pusty (nie wpisaliśmy do niego nic). Jeśli element z jakiegoś powodu zmieni swoje wymiary, to obiekt style wciąż zawierać będzie to, co ostatnio zostało do niego wpisane. Najprostszy przykład to:

<P STYLE="height:1px;" 
onclick="alert(this.style.height);">Alfa<BR>Beta</P>[/html] 

...po kliknięciu paragrafu dowiemy się, że jego wysokość wynosi 1px co jest oczywistą nieprawdą (został on "rozciągnięty" przez swoją zawartość). Co gorsze, uzyskany wynik jest łańcuchem 1px, a nie liczbą 1, co bardzo utrudnia jego dalsze przetwarzanie. 

Pozostałe problemy związane z obiektem style są analogiczne, jak przedstawione w poprzedniej części artykułu poświęconej odczytywaniu współrzędnych. 

<strong>Właściwości posWidth i posHeight </strong>

[code lang="js"]
vW=obiekt.style.posWidth; 
vH=obiekt.style.posHeight; 

To właściwości analogiczne do omówionych w poprzednim odcinku posTop i posLeft, z tym, że zwracają szerokość i wysokość obiektu w jednostkach podanych we właściwościach width i height (obiektu style). Właściwości te można zarówno odczytywać, jak i zapisywać. Bywają dość wygodne, gdy chcemy szybko zmienić wymiary obiektu nie zmieniając jednostki, w jakiej jest wyrażona:

<DIV STYLE="width:100px; height:100px; background:#FF0000;" 
onclick="this.style.posWidth+=5;"></DIV> 

– po każdym kliknięciu czerwonego kwadratu zwiększy on swoją szerokość o 5px. Gdybyśmy ustalili szerokość kwadratu w cm (np. width:10cm;), to po każdym kliknięciu zwiększałby on swoją szerokość o 5cm, a nie pikseli.

Właściwości pixelWidth i pixelHeight

iW=obiekt.style.pixelWidth; 
iH=obiekt.style.pixelHeight; 

To właściwości analogiczne do omówionych w poprzednim odcinku pixelTop i pixelLeft, z tym, że zwracają szerokość i wysokość obiektu (podaną we właściwościach width i height obiektu style) wyrażoną w pikselach. Właściwości te można zarówno odczytywać, jak i zapisywać.

Właściwości offsetWidth i offsetHeight

iW=obiekt.offsetWidth; 
iH=obiekt.offsetHeight; 

To właściwości analogiczne do omówionych w poprzednim odcinku offsetLeft i offsetTop, z tym, że zwracają szerokość i wysokość obiektu liczoną w pikselach. Choć formalnie wymiary te także podawane są „względem obiektu offsetParent” to liczbowo pozostają zawsze takie same – jeśli obiekt ma 15px szerokości to offsetWidth zwróci liczbę 15 niezależnie od pozycjonowania i położenia obiektu.

Należy pamiętać, że różne wersje Explorera w różny sposób definiują szerokość i wysokość obiektów, co może mieć wpływ na wartości odczytywane przez offsetWidth i offsetHeight.

Właściwości te można tylko odczytywać i nie można przy ich pomocy zmieniać wymiarów obiektów.

Właściwości clientWidth i clientHeight

iW=obiekt.clientWidth; 
iH=obiekt.clientHeight; 

Właściwości te zwracają wymiary obszaru client area obiektu liczone w pikselach (patrz poprzedni odcinek). Pokrótce przypomnę, że client area to obszar roboczy obiektu, rodzaj „okienka”, w którym wyświetla on swoją zawartość. W skład obszaru client area wchodzi padding, ale nie wchodzą paski przewijania i ewentualne obramowania. Przykładowo, jeśli zmaksymalizuję okno swojej przeglądarki, odczyt document.body.offsetWidth da mi wynik 1024, ale document.body.clientWidth – 1007, bo 17px to u mnie łączna szerokość dwóch obramowań BODY i paska przewijania.

Właściwości clientWidth i clientHeight nie są dostępne dla wszystkich obiektów. Aby zwróciły rzeczywiste wartości obiekt powinien posiadać layout (patrz poprzedni odcinek). Obydwie właściwości można jedynie odczytywać.

Właściwości scrollWidth i scrollHeight

iW=obiekt.scrollWidth; 
iH=obiekt.scrollHeight; 

Właściwości te zwracają wymiary zawartości obiektu liczone w pikselach. Nabierają znaczenia, gdy zawartość obiektu jest większa niż jego obszar client area – zawartość jest wtedy przewijana przy pomocy suwaków lub przycięta. Oto przykład:

<DIV ID="test" STYLE="border:5px solid #000000; height:50pt; overflow:auto;">Ala<BR>ma<BR>kota<BR>i<BR>trzy<BR>kanarki</DIV> 

W powyższym przykładzie:

test.style.height ==> 50pt (łańcuch) 
test.style.posHeight ==> 50 
test.style.pixelHeight ==> 67 
test.offsetHeight ==> 67 
test.clientHeight ==> 57 
test.scrollHeight ==> 114 

Jak widać, cały obiekt ma 67px wysokości, jego obszar client area ma 57px wysokości (10px zabiera górne i dolne obramowanie), a zawartość obiektu ma 114px wysokości (wyniki mogą być inne w zależności od parametrów użytej czcionki).

Właściwości scrollWidth i scrollHeight można tylko odczytywać.

Właściwości scrollTop i scrollLeft

iW=obiekt.scrollLeft; 
iH=obiekt.scrollTop; 

Właściwości te były omówione w poprzedniej części artykułu. Można je jednak interpretować także jako wymiary. scrollTop to albo pionowa współrzędna najwyższego punktu zawartości obiektu widocznego w swoim „oknie”, liczona względem górnej krawędzi tej zawartości; albo dystans, o jaki zawartość obiektu została przewinięta w dół; albo wysokość niewidocznej części zawartości ukrytej ponad górną krawędzią swojego „okna”. scrollLeft, analogicznie, można interpretować także jako szerokość niewidocznej części zawartości ukrytej za lewym brzegiem swojego „okna”.

Właściwości te można zarówno odczytywać, jak i zapisywać wymuszając tym samym przewijanie zawartości obiektu (patrz poprzedni odcinek).

Właściwości width, height, availWidth i availHeight

iW=window.screen.width; 
iH=window.screen.height; 

iW=window.screen.availWidth; 
iH=window.screen.availHeight; 

Właściwości te zwracają wymiary całego ekranu w px, a więc jego rozdzielczość: w poziomie (width) i w pionie (height). availWidth i availHeight zwracają wymiary maksymalnej dostępnej przestrzeni roboczej ekranu – mniejszej od rozdzielczości o wymiary paska zadań, jeśli nie jest on ukrywany. Oczywiście, właściwości te można tylko odczytywać i nie można przy ich pomocy przełączyć użytkownikowi rozdzielczości (na szczęście!).

Nie ma natomiast prostej metody na odczytanie bieżących wymiarów okna, w którym znajduje się strona. Można odczytać wymiary obszaru client area elementu BODY, ale okno jest przecież większe – posiada dodatkowe paski i obramowania. Na szczęście informacja ta nie ma w praktyce znaczenia, tym bardziej, że zawsze można zmienić wielkość okna metodą window.resizeTo(iX,iY), gdzie iX i iY to liczby całkowite określające żądaną szerokość i wysokość okna w pikselach (np. window.resizeTo(800,600) zmieni rozmiar okna przeglądarki na 800x600px).

Ukrywanie obiektów a wymiary

Czasami chcemy ukryć obiekt na stronie (np. budując menu rozwijane). Sposób ukrycia ma podstawowe znaczenie dla możliwości (lub niemożliwości) odczytania wymiarów niewidocznego obiektu. Jeżeli ukrywamy obiekt metodą display:none; element taki nie jest na stronie rysowany, a więc nie ma także żadnych wymiarów (a dokładniej ma wymiary zerowe). Owszem, można odczytać wymiary z obiektu style (width, posWidth, pixelWidth itd.), ale tylko pod warunkiem, że zostały tam wpisane wprost. Właściwości offsetWidth i offsetHeight będą wynosiły zero gdy obiekt będzie ukryty (także client… będą zerowe, ale jedynie do pierwszego wyświetlenia obiektu).

Jeśli ukrywamy obiekt metodą visibility:hidden; element jest rysowany na stronie w sposób niewidoczny – jest przezroczysty. Niemniej przez cały czas istnieje i ma swoje wymiary, które można odczytywać – wszystkie właściwości związane z wymiarami funkcjonują normalnie.

Jednostki

Na zakończenie kilka słów o jednostkach, w których określa się wymiary i współrzędne. W przypadku bezpośrednich atrybutów HTML do wyboru są liczby bez jednostki oznaczające piksele i liczby ze znakiem procenta oznaczające procentową część wymiarów innego obiektu (zwykle nadrzędnego).

W przypadku obiektu style możliwości jest więcej:

– piksel px np. 5px;
– cal in np. 5in;
– pica pc np. 5pc (pica to 1/6 cala);
– punkt pt np. 5pt (punkt amerykański to 1/72 cala);
– centymetr cm np. 5cm;
– milimetr mm np. 5mm;
– jednostka em np. 5em (em to bieżąca wysokość czcionki);
– jednostka ex np. 5ex (ex to bieżąca wysokość małej litery x);
– procent % np. 5%.

Jednostek em i ex można użyć do zdefiniowania wymiarów lub położenia obiektu uzależnionych od bieżącej wielkości czcionki. Jednak w praktyce trudno precyzyjnie określić, jakie wartości uzyskamy (przynajmniej w IE5.5), choć rzeczywiście zmieniają się one proporcjonalne do stopnia użytej czcionki.

W odróżnieniu od bezpośrednich atrybutów HTML, w obiekcie style nie wolno stosować liczb bez jednostek. Wyjątkiem są właściwości takie jak posWidth, pixelWidth itp., w przypadku których odpowiednia jednostka przyjmowana jest domyślnie (tu z kolei podanie jednostki jest błędem!).

Słowo końcowe…

W tym krótkim cyklu próbowałem przybliżyć podstawy pozycjonowania i wymiarowania obiektów dostępne w Internet Explorerze. Reszta to już praktyka – zachęcam do zabawy i eksperymentów. Wykorzystując przedstawione właściwości można osiągnąć wiele interesujących efektów – nie tylko standardowe menu rozwijane. Można napisać prostą grę zręcznościową albo generować wykresy prezentujące dane liczbowe w formie graficznej. Choć „programy” w DHTML-u nie mają rewelacyjnej szybkości, ich zaletą jest prostota i zerowa cena – wystarczy Explorer, Notatnik (lub Pajączek!) i sporo fantazji.

Paweł Rajewski

Skomentujesz?

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Administratorem Twoich danych osobowych będzie Rafał Płatek, prowadzący działalność gospodarczą pod firmą CREAM.SOFTWARE RAFAŁ PŁATEK, wpisaną do rejestru ewidencji gospodarczej CEiDG pod numerem NIP 681-112-89-55. Szczegóły związane z przetwarzaniem danych osobowych znajdziesz w polityce prywatności.