68.
Objekte ein-/ausblenden : display vs. visibility (27.10.2001)
Zum (dynamischen) Ein- bzw. Ausblenden von Objekten eines HTML-Dokuments lassen sich die CSS-Eigenschaften display bzw. visibility
einsetzen. Die wichtigsten Werte für display sind block | none (sowie inline) und für visiblity visible | hidden.
Der entscheidende Unterschied in der Anwendung beider Eigenschaften besteht in der Art und Weise der resultierenden Anzeige. Während man mit visibility lediglich das Einblenden (visible) bzw.
Ausblenden (hidden) erreicht, d. h. der Platz der Objekte bleibt erhalten, nimmt man mittels display das jeweilige Objekt komplett aus dem Dokumentenfluss (none) oder setzt es wieder
hinein (block). Eine zusätzliche Option bietet display: inline, womit sich z. B. die Gruppierung von Blockelementen innerhalb einer Zeile erreichen lässt (sinnvoll etwa bei mehreren Formular-Submitbuttons).
Beispiel 68 demonstriert dieses Verhalten in moderneren Browsern, sofern JavaScript aktiviert ist.
|