So steuern Sie das Anzeigen und Ausblenden von Divs mit CSS

DIV CSS Show and Hide

DIV ist ein häufig verwendetes Tag in HTML, das zum Unterteilen von Seiten und zum Implementieren des Layouts verwendet wird. In den interaktiven Effekten der Seite müssen wir manchmal bestimmte DIV-Elemente dynamisch anzeigen oder ausblenden. Zu diesem Zeitpunkt können wir die Anzeigeeigenschaft von CSS verwenden, um die Sichtbarkeit des DIV zu steuern.

1. Anzeigeattribut

Das Anzeigeattribut wird verwendet, um den Anzeigemodus von HTML-Elementen zu steuern. Es kann die folgenden Werte annehmen:

1. none

Wenn es auf „none“ gesetzt ist, wird das Element ausgeblendet und lässt keinen Platz auf der Seite.

2. Block

Wenn auf Block eingestellt, wird das Element als Element auf Blockebene angezeigt, dh das Element nimmt eine Zeile ein und die Breite des Containers wird ausgefüllt.

3. inline

Wenn es auf „inline“ eingestellt ist, wird das Element als Inline-Element angezeigt, d. h. mehrere Elemente können in derselben Zeile angezeigt werden.

4. Inline-Block

Bei Einstellung auf Inline-Block werden Elemente als Elemente auf Inline-Blockebene angezeigt, d. h. mehrere Elemente können in derselben Zeile angezeigt werden und es gibt einen bestimmten Abstand zwischen den Elementen.

5. Tabelle

Bei Einstellung auf Tabelle wird das Element in Tabellenform angezeigt und tabellenbezogene CSS-Eigenschaften können verwendet werden, um das Layout des Elements zu steuern.

Die oben genannten Werte können im Anzeigeattribut des DIV-Elements verwendet werden.

2. Grundlegende Syntax

Durch Festlegen des Anzeigeattributs können wir das DIV-Element anzeigen oder ausblenden. Das Folgende ist die grundlegende Syntax:

//显示元素
document.getElementById('example').style.display = 'block';

//隐藏元素
document.getElementById('example').style.display = 'none';

Im obigen Code erhalten wir das DIV-Element mit der Beispiel-ID über getElementById und steuern dann die Anzeige oder Ausblendung des Elements durch Festlegen des Attributs style.display.

3. Beispieldemonstration

Im Folgenden veranschaulichen wir anhand einer Beispieldemonstration, wie Sie die Anzeigeeigenschaft von CSS verwenden, um das Anzeigen oder Ausblenden von Elementen zu steuern.

1. DIV-Element ausblenden

Das Folgende ist ein DIV-Element:

<div id="example">Hi,我是DIV元素！</div>

Wir können den folgenden Code verwenden, um dieses Element auszublenden:

document.getElementById('example').style.display = 'none';

In diesem Beispiel erhalten wir das DIV-Element mit dem ID-Beispiel und fügen es dann hinzu Sein Anzeigeattribut ist auf „Keine“ gesetzt, wodurch das Element ausgeblendet wird.

2. DIV-Element anzeigen

Wenn wir ein zuvor ausgeblendetes DIV-Element anzeigen möchten, können wir den folgenden Code verwenden:

document.getElementById('example').style.display = 'block';

Auf diese Weise kann das zuvor ausgeblendete DIV-Element erneut angezeigt werden.

3. Ändern Sie den Anzeigemodus von DIV-Elementen

Bei der Erläuterung des Anzeigeattributs haben wir bereits erwähnt, dass Sie den Anzeigemodus für Elemente auf Blockebene, Inline, Inline-Blockebene und andere festlegen können. Auch die Darstellung von DIV-Elementen können wir auf diese Weise verändern.

Zum Beispiel können wir den folgenden Code verwenden, um ein DIV-Element in ein Inline-Element zu ändern:

document.getElementById('example').style.display = 'inline';

Auf diese Weise wird das DIV-Element, das ursprünglich eine ganze Zeile einnahm, wie Text inline angeordnet.

4. Zusammenfassung

Bei Seiteninteraktionseffekten müssen wir häufig die Anzeige oder das Ausblenden von Elementen dynamisch steuern. Diese Funktion kann einfach über die CSS-Anzeigeeigenschaft erreicht werden. Durch einfache Syntax können wir steuern, ob das DIV-Element tatsächlich existiert oder nicht, und ändern, wie es angezeigt wird. Beachten Sie, dass sich eine Änderung der Anzeigeeigenschaft auch darauf auswirkt, wie die Nachkommen des Elements angezeigt werden.

Das obige ist der detaillierte Inhalt vonSo steuern Sie das Anzeigen und Ausblenden von Divs mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!