Wie man Divs in CSS ein- und ausblendet

DIV-CSS ein- und ausblenden

DIV ist ein wichtiges Element in HTML-Tags. Es kann zum Anzeigen von Text, Bildern, Videos usw. verwendet werden. Im Webdesign stoßen wir oft auf Situationen, in denen wir bestimmte Elemente ein- oder ausblenden müssen, was die Verwendung von CSS zum Festlegen des DIV erfordert. In diesem Artikel erfahren Sie, wie Sie mit CSS DIV ein- und ausblenden.

1. CSS-Anzeigeeigenschaft

Die CSS-Anzeigeeigenschaft kann die Art und Weise steuern, wie Elemente auf der Seite angezeigt werden. display hat mehrere Werte, die folgenden werden häufig verwendet:

1. none: Das Element wird nicht angezeigt und belegt keinen Seitenplatz.
2. block: Das Element generiert einen Container auf Blockebene, der die gesamte Breite einnimmt Wird zum Anzeigen von Text oder Elementen auf Blockebene wie Bildern verwendet.
3. Inline: Das Element nimmt keine Zeile ein, sondern nur seine eigene Breite und Höhe. Es wird häufig zum Anzeigen von Inline-Elementen wie Links und Bildern verwendet Inline-Block: Ähnlich wie Inline, aber Breite und Höhe können eingestellt werden. Höhe;
4. Flex: Flexibles Layout, das den Platz der Elemente flexibel zuweisen kann.
5. Wir können DIV ausblenden und anzeigen, indem wir die Anzeigeeigenschaft von CSS festlegen.

Das Folgende ist ein Beispiel zur Veranschaulichung:

In der HTML-Datei erstellen wir ein DIV-Element:

Hier ist der Inhalt, der ausgeblendet/angezeigt werden soll

Legen Sie dann in der CSS-Datei das Anzeigeattribut des DIV fest:

#myDiv{

  display:none;   /* 默认隐藏 */

}

Wenn die Seite geladen wird, wird das DIV-Element ausgeblendet. Zu diesem Zeitpunkt müssen wir ein Ereignis hinzufügen, um den Anzeigeeffekt beim Klicken mit der Maus zu erzielen.

In JavaScript können Sie das Anzeigeattribut von CSS ändern, indem Sie das Stilattribut des Elements so festlegen, dass das Element ausgeblendet und angezeigt wird. Im Folgenden sind die spezifischen Vorgänge aufgeführt:

/

Holen Sie sich das Element

/ var myDiv = document.getElementById('myDiv');
/

Wenn Sie mit der Maus klicken, wird die DIV-Funktion

/ angezeigt showDiv(){

   myDiv.style.display = 'block';

}

/

Beim Klicken mit der Maus wird das DIV ausgeblendet

/ Funktion verstecktDiv(){

   myDiv.style.display = 'none';

}

Auf diese Weise wird das DIV beim Klicken mit der Maus auf der Seite als angezeigt ein Element auf Blockebene. Bei erneutem Klick wird es wieder ausgeblendet.

2. CSS-Sichtbarkeitsattribut

Ein weiteres Attribut, das das Ausblenden und Anzeigen von Elementen steuert, ist die Sichtbarkeit. Sichtbarkeit hat zwei Werte: sichtbar (sichtbar) und verborgen (versteckt). Im Gegensatz zur Anzeige ist das Element ausgeblendet, wenn die Sichtbarkeit auf „Ausgeblendet“ eingestellt ist, es belegt jedoch weiterhin Platz auf der Seite.

In der HTML-Datei erstellen wir außerdem ein DIV-Element:

Hier ist der Inhalt, der ausgeblendet/angezeigt werden soll

Dann legen Sie in der CSS-Datei das DIV fest Sichtbarkeitsattribut:

#myDiv{

  visibility:hidden;   /* 默认隐藏 */

}

Wenn die Seite geladen wird, wird dieses DIV-Element ausgeblendet. Zu diesem Zeitpunkt müssen wir ein Ereignis hinzufügen, um den Anzeigeeffekt beim Klicken mit der Maus zu erzielen.

In JavaScript können wir das Sichtbarkeitsattribut eines Elements auch ändern, indem wir sein Stilattribut ändern. Das Folgende ist der spezifische Code:

/

Holen Sie sich das Element

/ var myDiv = document.getElementById('myDiv');
/

Wenn Sie mit der Maus klicken, wird die DIV-Funktion showDiv(){

angezeigt

   myDiv.style.visibility = 'visible';

}
/ Wenn mit der Maus geklickt wird, wird das DIV ausgeblendet

/

Funktion verstecktDiv(){

   myDiv.style.visibility = 'hidden';

}
Auf diese Weise wird das DIV sichtbar, wenn mit der Maus geklickt wird. Bei erneutem Klick wird es wieder ausgeblendet.

3. Zusammenfassung

Im Webdesign ist das Ein- und Ausblenden von Elementen eine sehr häufige Anforderung. Es gibt im Wesentlichen zwei Möglichkeiten, das Ausblenden und Anzeigen von Elementen zu steuern: Eine besteht darin, es durch Ändern des Anzeigeattributs des Elements zu steuern, und die andere darin, es durch Ändern des Sichtbarkeitsattributs des Elements zu steuern. Durch die Beherrschung dieser beiden Methoden können wir das Anzeigen und Ausblenden verschiedener Elemente flexibler steuern und so bessere Anzeigeeffekte auf Webseiten erzielen.

Das obige ist der detaillierte Inhalt vonWie man Divs in CSS ein- und ausblendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!