Bücher online kostenlos Kostenlos Online Lesen
HTML5-Handbuch - die neuen Features von HTML5

HTML5-Handbuch - die neuen Features von HTML5

Titel: HTML5-Handbuch - die neuen Features von HTML5 Kostenlos Bücher Online Lesen
Autoren: Franzis
Vom Netzwerk:
{
    document.getElementById('glossar').style.visibility="visible";
    document.getElementById('glossarlink').style.display="none";
    }
    
    Titel
    
    
    

Glossar


    
    
      

      

Das Glossar wurde Ihnen präsentiert von GlossyPossy


     

     
    
    Bild 14.38: Zustand 1 des Sichtbarkeitsbeispiels – visibility
    Bild 14.39: Zustand 2 des Sichtbarkeitsbeispiels – display: none
    Bild 14.40: Beispiel-Zustand 3 des Sichtbarkeitsbeispiels – display: block
Erläuterung
    Nach dem Laden wird das Beispiel-HTML-Dokument so angezeigt wie in der ersten der drei Abbildungen zu sehen. Unterhalb der Überschrift ist ein Link mit dem Text Glossar anzeigen notiert. Darunter ist ein größerer Leerraum, bevor der Inhalt des Footer-Bereichs folgt. Der Leerraum entsteht dadurch, dass das Glossar selbst, die
dl
-Liste,zunächst verborgen ist, und zwar mit
visibility:
hidden;
. Diese Angabe bewirkt, dass der Raum, den das Element normalerweise einnehmen würde, als Leerraum dargestellt wird.
    Klickt der Anwender den Link Glossar anzeigen an, wird der Link selbst mittels Scripting ausgeblendet, und zwar mit
display:
none;
, wodurch er ohne Leerraumersatz verschwindet. Stattdessen wird nun der Zustand sichtbar, der in der zweiten Abbildung zu sehen ist. Das Glossar ist so gestaltet, dass die
dt
-Elemente sichtbar sind. Die zugehörigen Definitionen in den
dd
-Elementen sind dagegen mit
display:
none;
auf unsichtbar ohne Platzhalterleerraum gesetzt. Die Glossar-Begriffe in den
dt
-Elementen bestehen aus Hyperlinks. Klickt der Anwender einen der Hyperlinks an, wird das zugehörige
dd
-Element mittels Scripting eingeblendet. Genauer: dessen
display
-Eigenschaft wird mittels Scripting auf den Wert
block
gesetzt. Dadurch wird das
dd
-Element als Blockelement angezeigt, so wie im dritten Bild zu sehen. Ein weiterer Klick auf den zugehörigen Link blendet die Definition übrigens wieder aus. Mit den übrigen Glossareinträgen funktioniert das genauso.
    Mit
visibility:
können Sie bestimmen, ob ein Element mit Platzhalterleerraum angezeigt wird oder nicht. Mögliche Wertzuweisungen sind die Schlüsselwörter
visible
(der Inhalt des Elements wird angezeigt = Normaleinstellung) oder
hidden
(der Inhalt des Elements wird nicht angezeigt).
    Ferner gibt es noch die Angabe
collapse
. Sie ist speziell für Tabellen gedacht. So ausgezeichnete Spalten oder Reihen einer Tabelle werden versteckt und geben den zuvor benötigten Platz frei. Auf alle anderen Elemente wirkt
collapse
so wie
hidden
.
    Mit
display:
können Sie die Anzeige von Elementen unterdrücken oder die Art der Anzeige festlegen. Zu den möglichen Wertzuweisungen gehören unter anderem die Schlüsselwörter
none
(Element ist unsichtbar ohne Leerraum),
block
(Element wird sichtbar als Blockelement angezeigt) und
inline
(Element wird sichtbar als Inline-Element angezeigt).
Referenzinformationen
    CSS-Eigenschaften
display
:

    CSS-Eigenschaften
visibility
:

    Internet Explorer

Weitere Kostenlose Bücher