document.layers

Rozdział dotyczy tylko przeglądarki Netscape 4.x

W poprzednich rozdziałach powiedzieliśmy sobie o sposobach dostępu do formularzy i rysunków.
W tym rozdziale zajmiemy się sposobami dostępu do warstw. Problem polega na tym, że dostęp do warstw jest realizowany odmiennie w różnych przeglądarkach.
W przeglądarce Netscape 4.x jako warstwa jest rozumiana ta część dokumentu, która jest objęta znacznikiem <DIV>, jak również część dokumentu objęta znacznikiem <LAYER>. Dostęp do warstw jest realizowany za pomocą obiektu document.layers w następujący sposób:

document.layers["nazwa_warstwy"];
lub
document.layers.nazwa_warstwy;

Mając dostęp do warstwy, możemy sobie pozwolić na dynamiczną zmianę jej właściwości. Najczęściej wykorzystywanymi właściwościami warstw są:

• clip.width - szerokość warstwy w pikselach
• clip.height - wysokość warstwy w pikselach
• top - położenie warstwy w pionie w stosunku do początku dokumentu w pikselach
• left - położenie warstwy w poziomie w pikselach
• visibility - widoczność warstwy (wartość "hidden" lub "visible")
• bgColor - kolor warstwy
• zIndex - położenie warstwy na stosie innych warstw (w przypadku, gdy jedna warstwa nachodzi na drugą, warstwa o wyższej wartości zIndex jest na wierzchu)

Na przykład, jeżeli mamy w dokumencie zdefiniowaną następującą warstwę:

<LAYER NAME="warstwa" top="10" left="0" width="200" height="50" bgColor="red">
tekst na warstwie
</LAYER>

i chcemy ją przesunąć o 10 pikseli w prawo, to robimy to w następujący sposób:

document.layers.warstwa.left = 10;

Dostęp do warstwy uzyskujemy nie tylko po to, aby zmienić właściwości tej warstwy, lecz również po to aby uzyskać dostęp do elementów znajdujących się na tej warstwie.
Pisząc skrypty dla przeglądarek Netscape 4.x, musimy pamiętać o jednej ważnej rzeczy. Aby uzyskać dostęp do jakiegokolwiek elementu znajdującego się na warstwie, trzeba mieć na uwadze hierarchiczną strukturę dokumentu.

Na przykład, jeżeli mamy rysunek na warstwie:

<LAYER NAME="warstwa1">
<IMG NAME="rysunek1" SRC="plik1.gif">
</LAYER>

to zmiana tego rysunku może być zrealizowana w następujący sposób:

document.layers.warstwa1.document.images.rysunek1.src = "plik2.gif";

Jeżeli mamy do czynienia z zagnieżdżeniem warstw (warstwa na warstwie), to dostęp do warstwy wewnętrznej musi być zrealizowany w następujący sposób:

document.layers.warstwa1.layers.warstwa2;

document.all

Rozdział dotyczy tylko przeglądarki Internet Explorer w wersji 4.x lub nowszej.

W przeglądarce Internet Explorer istnieje zupełnie inna filozofia dostępu do poszczególnych elementów dokumentu. Pomimo, że hierarchiczna struktura dokumentu jak najbardziej istnieje, to jednak w większości przypadków nie musimy się tym absolutnie przejmować. Na przykład, dostęp do rysunku:

document.images.nazwa_rysunku;

będzie zrealizowany, niezależnie od tego, czy rysunek ten znajduje się na jakiejkolwiek warstwie, czy też nie. Obiekty takie jak document.images, czy też document.forms są w tej przeglądarce kolekcjami elementów znajdujących się w całym dokumencie, niezależnie od strukturalnego szczebla hierarchi na jakim się znajdują. Takim obiektem jest również document.all. Obiekt ten jest kolekcją wszystkich elementów znajdujących się w dokumencie. Jeżeli nadamy dowolnemu elementowi w dokumencie identyfikator (atrybut ID lub NAME), to możemy uzyskać do niego dostęp wykorzystując obiekt document.all:

document.all["nazwa_elementu"];
lub
document.all.nazwa_elementu;

Jeżeli chodzi o warstwy, to w przeglądarce Internet Explorer, jako warstwa rozumiana jest ta część dokumentu, która objęta jest znacznikiem <DIV> (znacznik <LAYER> jest ignorowany)

<DIV ID="id_warstwy">
zawartość warstwy
</DIV>

Tak więc, aby uzyskać dostęp do warstwy, możemy posłużyć się obiektem document.all oraz identyfikatorem warstwy:

document.all.id_warstwy;

I jeszcze jedna rada: Aby ODCZYTAĆ pozycję i rozmiary warstwy, posługujmy się takimi właściwościami jak:
offsetTop
offsetLeft
offsetWidth
offsetHeight

Na przykład:

szerokosc=document.all.id_warstwy.offsetWidth;

Natomiast do ZMIANY pozycji lub rozmiaru posługujmy się obiektem style i właściwościami:
top
left
width
height

Na przykład:

document.all.id_warstwy.style.width=100;

Warstwy i Netscape 6+/Mozilla

Model obiektowy przeglądarki Netscape w wersji 6.x, w rzeczywistowści ma więcej wspólnego z Internet Explorerem niż ze swoim poprzednikiem. Dlatego też, wszystko co zostało napisane w poprzednim rozdziale dotyczy również Netscape'a w wersji 6.x, poza jednym wyjątkiem. W przeglądarce tej nie ma obiektu document.all. Istnieje jednak metoda obiektu document, która pozwala na dostęp do dowolnego elementu strony za pomocą identyfikatora tego elementu. Tą metodą jest getElementById().

Na przykład, dostęp do warstwy:

document.getElementById("id_warstwy").style.width=100;