Elemente mit visibility verstecken und sichtbar machen
Auf Websites müssen HTML-Elemente manchmal versteckt und durch eine Aktion wieder sichtbar gemacht werden oder umgekehrt. Zum Ausblenden wird häufig die CSS-Eigenschaft display mit dem Wert none verwendet. Eine andere Möglichkeit bietet die Eigenschaft visibility. Zwischen den beiden Eigenschaften gibt es einige Unterschiede. Wird ein Element mit visibility versteckt, wird der Platz hierfür trotzdem reserviert. Bei display: none; verhält es sich dagegen so, als würde das Element nicht existieren und die nachfolgenden Elemente nehmen den Platz ein. Außerdem ist eine Animation mit visibility möglich.
Während mit display auch das Verhalten der Elemente geändert werden kann, z.B. um Inline-Elemente wie Block-Elemente verhalten zu lassen, ist die Eigenschaft visibility im Grunde nur zum Verstecken und sichtbar machen von Elementen gedacht. Die Syntax ist anhand eines Beispiels nachfolgend abgebildet.
Werte für die Eigenschaft visibility
Die folgenden Werte können für visibility angegeben werden.
- visible (Standardwert, Element ist sichtbar)
- hidden (Element wird versteckt bzw. ist unsichtbar, der Platz wird dafür gelassen)
- collapse (Zum Verstecken von Tabellenzeilen und -spalten)
- inherit (Vererbung durch Elternelement)
Beispielcodes mit visibility
Nachfolgend sind Beispielcodes für visibility mit den Werte visible, hidden und collapse.
.selektor1 {
visibility: hidden;
}
.selektor2 {
visibility: visible;
}
.selektor3 {
visibility: collapse;
}
.tabellenrahmen {
border: 1px solid #001055;
}<p class="selektor1">Verstecktes Element</p>
<p class="selektor2">Sichtbares Element</p>
<table class="tabellenrahmen">
<tr class="selektor3">
<td>
Zeile 1, Spalte 1
</td>
<td>
Zeile 1, Spalte 2
</td>
</tr>
<tr>
<td>
Zeile 2, Spalte 1
</td>
<td>
Zeile 2, Spalte 2
</td>
</tr>
</table>Die Darstellung im Browser würde bei den Beispielcodes wie folgt sein.
Die Unterstützung des Werts collapse ist nicht bei allen Browsern gegeben bzw. zum Teil fehlerhaft.