So verwenden Sie das Anzeigeattribut von CSS, um div-Elemente auszublenden und anzuzeigen

Bestimmte Elemente auf der Seite ausblenden oder anzeigen verwenden häufig das CSS-Anzeigeattribut. In diesem Artikel konzentrieren wir uns darauf, wie Sie das Anzeigeattribut von CSS verwenden, um div-Elemente auszublenden und anzuzeigen.

1. Das Anzeigeattribut von CSS

Das Anzeigeattribut von CSS hat viele Werte, darunter die folgenden häufig verwendeten Werte:

• none: Blendet das Element aus und gibt den vom Element belegten Platz frei.
• Block: Zeigt das Element als Element auf Blockebene an.
• inline-block: Zeigt das Element als Inline-Block-Level-Element an.
• inline: Zeigt das Element als Inline-Element an.
• Tabelle: Zeigt das Element als Tabellenelement an.
• table-row: Zeigt das Element als Tabellenzeilenelement an.
• table-cell: Zeigt das Element als Tabellenzellenelement an.

2. Verwenden Sie das Anzeigeattribut, um das div-Element auszublenden und anzuzeigen.

1. Verstecken Sie das div-Element div-Element

Verwenden Sie das Anzeigeattribut, um ein div-Element als Element auf Blockebene anzuzeigen:

div {
  display: none;
}

Verwenden Sie das Anzeigeattribut, um ein div-Element als Inline-Blockebenenelement anzuzeigen:

2. div {
     display: block;
   }

Verwenden Sie das Anzeigeattribut, um ein div anzuzeigen Element als Inline-Element:

div {
  display: inline-block;
}

Verwenden Sie das Anzeigeattribut, um ein div-Element als Inline-Element anzuzeigen. Zeigen Sie das Element als Tabellenelement an:

div {
  display: inline;
}

Verwenden Sie das Anzeigeattribut, um das div-Element als Tabellenzeilenelement anzuzeigen:

div {
  display: table;
}

Verwenden Sie das Anzeigeattribut, um das div-Element als Tabellenzellenelement anzuzeigen:

div {
  display: table-row;
}

3. Verwenden Sie JavaScript, um das Aus- und Ausblenden von div-Elementen zu steuern. Display

Wenn Sie das Aus- und Ausblenden von div-Elementen beim Benutzer steuern möchten Wenn Sie auf eine Schaltfläche klicken, können Sie dazu JavaScript verwenden.

div {
  display: table-cell;
}

Wenn der Benutzer im Beispiel auf die Schaltfläche klickt, wird das div-Element mit der ID myDiv über JavaScript abgerufen und bestimmt, ob das Anzeigestilattribut des Elements „None“ ist. Wenn ja, setzen Sie es auf „Blockieren“, andernfalls legen Sie es fest ist keiner. Dies implementiert das Ausblenden und Anzeigen von div-Elementen.

Zusammenfassung

In der Einleitung dieses Artikels können wir feststellen, dass das Anzeigeattribut von CSS ein sehr wichtiges Attribut ist, das zur Steuerung der Anzeige und des ausgeblendeten Zustands von Elementen auf der Seite verwendet wird. Unabhängig davon, ob Sie den Status eines Elements direkt über CSS steuern oder interaktive Funktionen über JavaScript implementieren, ist es unbedingt erforderlich, die Verwendung des Anzeigeattributs zu beherrschen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Anzeigeattribut von CSS, um div-Elemente auszublenden und anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!