Udostępnij za pośrednictwem

  • Artykuł

          

Encyklopedia: Jak ukryć element strony HTML - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Jakub Kędziora

Opublikowano: 2011-10-20

Czasami zdarza się, że musimy ukryć tymczasowo lub na stałe pewien element strony HTML. Jest to wykorzystywane najczęściej przy stronach dynamicznych w JavaScript. Do ukrycia elementu w CSS możemy wykorzystać właściwość visibility lub display. Różnica między nimi polega na tym, że visibility:hidden ukrywa element, zostawiając puste miejsce o takich samych rozmiarach, jak gdyby element był widoczny, natomiast display:none umożliwia całkowite usunięcie elementu z ekranu.

Właściwość visibility  może przyjmować poniższe wartości:

  • visible – element będzie widoczny (jest to domyślny styl),
  • hidden – element nie będzie widoczny, a w jego miejsce pojawi się pusta przestrzeń o takich samych rozmiarach, jak gdyby element był widoczny,
  • collapse – działa tylko dla elementów tabeli, usuwając z ekranu wiersze lub kolumny, ten atrybut zastosowany dla innych elementów działa jak hidden.

Właściwość display, jako wartości, może przyjmować m.in.:

  • none – element nie będzie widoczny i nie będzie zajmował miejsca.

Przykład

Przykład prezentujący możliwości ukrycia elementów strony HTML za pomocą CSS:

<html>
<head>
    <title>Jak ukryć element strony HTML</title>
    <style type="text/css">
        .ukryty { visibility: hidden; }
        .widoczny { visibility: visible; } 
        .usuniety { display:none; }
    </style>
</head>
<body>
    <p class="widoczny">Akapit widoczny 1 </p>
    <p class="ukryty">Akapit niewidoczny</p>
    <p class="widoczny">Akapit widoczny 2</p>
    <p class="usuniety">Akapit usunięty</p>
    <p class="widoczny">Akapit widoczny 3</p>
</body>
</html>

Po otwarciu w przeglądarce otrzymamy wynik jak na Rys. 1. Zauważ, że między elementami Akapit widoczny 1 a Akapit widoczny 2 jest przerwa – zastosowaliśmy visibility: hidden. Między elementami Akapit widoczny 2 a Akapit widoczny 3 przerwy nie ma – zastosowaliśmy display:none.

Rys. 1. Różnice między ukryciem elementu za pomocą visibility: hidden a display:none.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać ukrywanie elementów na stronie w samouczku: