CSS ausblenden div. anzeigen

CSS Hide and Show DIV

In der Webentwicklung ist das Ein- und Ausblenden von Elementen eine häufig verwendete Aufgabe, insbesondere beim Erstellen dynamischer Effekte. Mithilfe von CSS lassen sich Elemente ganz einfach ein- und ausblenden, außerdem kann die Website dadurch schneller geladen und das Benutzererlebnis verbessert werden.

1. Anzeigeattribut

Das Anzeigeattribut kann steuern, wie ein Element angezeigt wird. Es hat die folgenden Werte:

• none: zeigt an, dass das Element nicht angezeigt wird und 0 Platz einnimmt.
• block: Gibt an, dass das Element als Element auf Blockebene angezeigt wird und eine Zeile einnimmt.
• inline: Gibt an, dass die Elemente als Inline-Elemente ohne Zeilenumbrüche und in der Reihenfolge angezeigt werden.
• inline-block: Gibt an, dass das Element als Inline-Block-Level-Element ohne Zeilenumbruch angezeigt wird, aber Attribute wie Breite, Höhe, Abstand usw. können festgelegt werden.
• Tabelle: Gibt an, dass das Element als Tabelle angezeigt wird.
• table-cell: Gibt an, dass das Element als Tabellenzelle angezeigt wird.
• flex: Zeigt an, dass das Element ein flexibles Layout annimmt.
• Gitter: Zeigt an, dass das Element ein Rasterlayout annimmt.

Zum Beispiel können wir display:none verwenden, um ein Element auszublenden:

<div style="display:none;">这是一个被隐藏的元素</div>

Verwenden Sie display:block, um das Element als Element auf Blockebene anzuzeigen:

<div style="display:block;">这是一个显示为块级元素的元素</div>

2. Sichtbarkeitsattribut

Sichtbarkeitsattribut kann die Sichtbarkeit steuern des Elements. Es hat die folgenden Werte:

• visible: zeigt an, dass das Element sichtbar ist.
• hidden: Zeigt an, dass das Element unsichtbar ist, aber dennoch Platz einnimmt.

Zum Beispiel können wir „visibility:hidden“ verwenden, um ein Element auszublenden:

<div style="visibility:hidden;">这是一个被隐藏的元素</div>

Verwenden Sie „visibility:visible“, um das Element anzuzeigen.

3. Opacity-Attribut

Opacity-Attribut kann die Transparenz von Elementen steuern. Der Wertebereich liegt zwischen 0 und 1, wobei 0 völlig transparent und 1 undurchsichtig bedeutet.

Zum Beispiel können wir ein Element als durchscheinend festlegen:

<div style="opacity:0.5;">这是一个半透明的元素</div>

4. CSS3-Animation

Zusätzlich zu den oben genannten drei Methoden können wir auch CSS3-Animationen verwenden, um Elemente auszublenden und anzuzeigen. CSS3-Animationen können reichhaltigere Effekte erzeugen und die Interaktivität der Website verbessern.

Zum Beispiel können wir @keyframes verwenden, um eine Animation zu definieren, die ausgeblendet und angezeigt werden soll:

@keyframes showDiv {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

<div class="show" style="opacity:0;">这是一个被隐藏的元素</div>

<style>
.show {
    animation: showDiv 1s forwards;
}
</style>

Im obigen Code definieren wir zunächst eine @keyframes-Regel, die den Animationseffekt von Transparenz 0 bis Transparenz 1 definiert. Setzen Sie dann class="show" und die anfängliche Transparenz im Element auf 0. Schließlich wird der .show-Klasse im Stylesheet das Animationsattribut hinzugefügt, das den Namen, die Dauer und den Stylesheet-Status nach Ende der Animation angibt.

Durch die Steuerung des Hinzufügens und Entfernens dieser Klasse können wir den Anzeigestatus des Elements ändern:

var div = document.getElementsByClassName("show")[0];
div.classList.add("show");

var div = document.getElementsByClassName("show")[0];
div.classList.remove("show");

Zusammenfassung

Der obige Inhalt stellt verschiedene Methoden zur Verwendung von CSS zum Ausblenden und Anzeigen von Elementen vor, einschließlich des Anzeigeattributs und des Sichtbarkeitsattributs sowie Deckkraftattribute und CSS3-Animationen. Die Beherrschung dieser Methoden kann uns helfen, elegantere und anspruchsvollere Webseiteneffekte zu erzielen.

Das obige ist der detaillierte Inhalt vonCSS ausblenden div. anzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!