Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Ukrywanie i odsłanianie warstw

Email Drukuj PDF

Jak w takim razie można ukryć bądź odsłonić umieszczoną na witrynie warstwę? Otóż trzeba zmodyfikować przypisany jej styl przez zmianę właściwości visibility obiektu style. Może ona przyjmować wartości visible (widoczna), hidden (niewidoczna), inherited (widoczność odziedziczona po elemencie nadrzędnym). Tak więc ukrycie można osiągnąć dzięki instrukcji:

document.getElementById("id_warstwy").style.visibility = "hidden";

natomiast odsłonięcie dzięki instrukcji:

document.getElementById("id_warstwy").style.visibility = "visible";

Jeśli zamierzamy wykonywać więcej operacji na danej warstwie, to aby nie stosować wciąż metody getElementById, można wywołać ją raz, a wynik jej działania zapisać w pomocniczej zmiennej, np.:

var warstwa = document.getElementById("id_warstwy");

warstwa.style.visiblity = "hidden";

lub wręcz:

var selector = document.getElementById("warstwa").style;

selector.visibility = "hidden";

W jaki sposób w praktyce można sterować widocznością warstwy, zobrazowano w skrypcie pokazanym na listingu 5.20.

Listing 5.20. Ukrywanie i wyświetlanie warstwy

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pl">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <title>Moja strona WWW</title>

    <script type="text/javascript">

    function pokaz()

    {

      document.getElementById("wr1").style.visibility = "visible";

    }

    function ukryj()

    {

      document.getElementById("wr1").style.visibility = "hidden";

    }

    </script>

  </head>

  <body>

    <div

      id="wr1"

      style="position:absolute;width:100px;height:100px;

             background-color:yellow;left:100px;top:50px;visibility:visible;"

    >

    </div>

    <div>

    <input

      type="radio"

      name="rd1"

      onclick="pokaz();"

      checked

    >Pokaż warstwę wr1 na ekranie

    <input

      type="radio"

      name="rd1"

      onclick="ukryj();"

    >Ukryj warstwę wr1

    </div>

  </body>

</html>

Po wczytaniu kodu do przeglądarki ukaże się widok zaprezentowany na rysunku 5.7. Widać na nim kwadratową warstwę o żółtym kolorze tła, o rozmiarach 100×100 pikseli, oraz dwa zgrupowane pola radio pozwalające na zmianę jej widoczności.

Rysunek 5.7. Strona pozwalająca na ukrywanie i pokazywanie warstwy

Pierwszemu z pól została przypisana procedura obsługi zdarzenia onclick w postaci funkcji pokaz, a drugiemu procedura obsługi takiego samego zdarzenia w postaci funkcji ukryj. Dzięki temu przez kliknięcie jednego z pól można w prosty sposób ukryć bądź odsłonić warstwę. Kod obu wymienionych funkcji jest bardzo prosty, to instrukcja zmieniająca w opisany powyżej sposób atrybut visibility.

 

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15751977