So zeigen und verbergen Sie CSS-Divs

CSS ist eine Sprache für die Gestaltung von Webseiten. Sie kann verwendet werden, um das Erscheinungsbild und Layout der Seite zu ändern. In CSS kann das div-Element verwendet werden, um Webinhalte zu gruppieren und unterschiedliche Stile auf diese Komponenten anzuwenden. Unter anderem ist das Anzeigen und Ausblenden von div-Elementen für die Gestaltung der Seite sehr nützlich.

In diesem Artikel besprechen wir, wie man CSS-Div-Elemente zum Ein- und Ausblenden von Seitenelementen verwendet. Dieser Artikel behandelt den folgenden Inhalt:

1. Was ist das CSS-Div-Element?
2. CSS-Anzeigeeigenschaft? div-Element
3. In HTML ist das div-Element ein Element auf Blockebene ohne Semantik. Es kann zum Gruppieren von Webinhalten verwendet werden und das Erscheinungsbild und Layout dieser Komponenten kann über CSS-Stile geändert werden.
4. Angenommen, wir haben drei verschiedene Inhaltselemente auf der Webseite. Der HTML-Code für diese Elemente lautet wie folgt:

<div class="header">头部内容</div>
<div class="content">正文内容</div>
<div class="footer">底部内容</div>

Im obigen Code haben wir drei div-Elemente verwendet, um die Kopfzeile, den Hauptteil und das Ende zu gruppieren Inhalt . Als Nächstes können wir den Stil jedes div-Elements über CSS-Stile ändern, z. B. durch Festlegen der Hintergrundfarbe, der Textschriftart, des Rahmens usw.

2. CSS-Anzeigeattribut

In CSS kann das Anzeigeattribut verwendet werden, um den Anzeigemodus eines Elements zu steuern. Zu seinen Werten gehören die folgenden:

none: Das Element wird nicht angezeigt und belegt keinen Seitenplatz.

Block: Das Element wird als Element auf Blockebene angezeigt und belegt eine eigene Zeile.

inline: Das Element wird als Inline-Element angezeigt und in derselben Zeile wie andere Inline-Elemente angezeigt.

inline-block: Das Element wird als Inline-Blockelement angezeigt und in derselben Zeile wie andere Inline-Elemente angezeigt, es können jedoch Attribute wie Breite und Höhe festgelegt werden.
• Hier ist ein Beispiel, das zeigt, wie man die CSS-Anzeigeeigenschaft verwendet, um ein Seitenelement auszublenden.

<div class="box">要隐藏的元素</div>

.box {
  display: none;
}

Im obigen Code verwenden wir ein div-Element mit einer Klassenbox und setzen dessen Anzeigeattribut auf „none“. Dies bedeutet, dass dieses div-Element nicht auf der Seite angezeigt wird.

3. CSS-Sichtbarkeitsattribut

Das CSS-Sichtbarkeitsattribut kann auch verwendet werden, um das Anzeigen und Ausblenden eines Elements zu steuern. Im Gegensatz zum Anzeigeattribut steuert das Sichtbarkeitsattribut nur, ob das Element sichtbar ist, hat jedoch keinen Einfluss auf das Layout des Elements auf der Seite. Zu den optionalen Werten für das Sichtbarkeitsattribut gehören:

visible: Das Element ist sichtbar, was dem Standardwert des Anzeigeattributs entspricht.

versteckt: Das Element ist unsichtbar, belegt aber dennoch Platz auf der Seite.

collapse: Wird für Tabellenelemente verwendet. Bei der Einstellung „Collaps“ wird das Element unsichtbar und der Zellenrand verschwindet.

• Hier ist ein Beispiel, das zeigt, wie man die CSS-Sichtbarkeitseigenschaft verwendet, um ein Seitenelement auszublenden.

<div class="box">要隐藏的元素</div>

.box {
  visibility: hidden;
}

Im obigen Code verwenden wir ein div-Element mit einer Klassenbox und setzen dessen Sichtbarkeitsattribut auf „hidden“. Dies bedeutet, dass das div-Element nicht auf der Seite angezeigt wird, aber dennoch Platz auf der Seite einnimmt.

4. So verwenden Sie CSS-Div-Elemente, um Seitenelemente anzuzeigen und auszublenden.

Wir haben oben die CSS-Anzeige- und Sichtbarkeitseigenschaften eingeführt, um eine Klickschaltfläche auf der Seite zu implementieren, um ein Div anzuzeigen oder auszublenden Element. Funktion.

Der HTML-Code lautet wie folgt:

<button onclick="toggle()">点击我</button>
<div class="box">要显示或隐藏的元素</div>

Im obigen Code haben wir ein Schaltflächenelement erstellt und ihm ein Onclick-Ereignis hinzugefügt. Wir erstellen außerdem ein div-Element mit einer Klassenbox, das ist das Element, das wir ausblenden oder anzeigen möchten.

Als nächstes fügen wir der CSS-Datei den folgenden Code hinzu:

.box {
  visibility: hidden;
}

Dadurch wird das Box-Element unsichtbar, wenn die Seite gerade geladen wird.

Schließlich fügen wir den folgenden Code zum JavaScript-Code der Seite hinzu:

function toggle() {
  var box = document.querySelector('.box');
  if (box.style.display === 'none') {
    box.style.display = '';
  } else {
    box.style.display = 'none';
  }
}

Im obigen Code definieren wir eine Funktion namens toggle() und binden sie an das Onclick-Ereignis der Schaltfläche. Innerhalb der Funktion verwenden wir die Methode document.querySelector(), um das Element mit der Klassenbox abzurufen und zu prüfen, ob sein Anzeigeattribut „none“ ist. Wenn dies der Fall ist, setzen wir seine Anzeigeeigenschaft auf die leere Zeichenfolge, wodurch das Box-Element angezeigt wird. Andernfalls setzen wir seine Anzeigeeigenschaft auf „Keine“, wodurch das Box-Element ausgeblendet wird.

Oben erfahren Sie, wie Sie CSS-Div-Elemente verwenden, um Seitenelemente anzuzeigen und auszublenden. Durch die Beherrschung dieser Techniken können wir unsere Seiten dynamischer und interaktiver gestalten.

Das obige ist der detaillierte Inhalt vonSo zeigen und verbergen Sie CSS-Divs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!