divcsshide

Div CSS Hide

In der Webentwicklung ist es oft notwendig, einige Elemente auszublenden. Zu den häufigsten gehören das Ausblenden von Pop-ups, Dropdown-Menüs, Seitenleisten usw. Es gibt viele Möglichkeiten, diese Funktionen zu erreichen. Heute lernen wir, wie man CSS zum Ausblenden von Elementen verwendet.

In CSS gibt es zwei häufig verwendete Eigenschaften, die zum Ausblenden von Elementen verwendet werden können: Anzeige und Sichtbarkeit. Ihre Verwendungsmethoden unterscheiden sich geringfügig. Lassen Sie uns im Folgenden separat darüber sprechen.

1. Anzeigeattribut

Anzeigeattribut kann den Anzeigemodus des Elements steuern, einschließlich ob es angezeigt wird, wie es angezeigt wird usw. Darunter display: none kann das Element vollständig ausblenden, ohne eine Position oder einen Platz einzunehmen. Bei Verwendung dieses Attributs erscheint das Element nicht auf der Seite und kann nicht über JavaScript aufgerufen werden.

Als nächstes schauen wir uns an, wie man das Anzeigeattribut verwendet, um Elemente auszublenden:

<!-- HTML 代码 -->
<div id="element">这是一个元素</div>

/* CSS 代码 */
#element {
  display: none;
}

Der obige Code verwendet das Anzeigeattribut, um das Element mit der ID des Elements auszublenden. Dieses Element erscheint nicht auf der Seite und nimmt keinen Platz ein. Um das Element erneut anzuzeigen, setzen Sie einfach die Anzeigeeigenschaft auf einen anderen Wert.

Zusätzlich zu display: none verfügt das Anzeigeattribut über andere Werte wie Inline, Block, Inline-Block usw., die entsprechend der tatsächlichen Situation ausgewählt werden können. Im folgenden Beispiel ändern wir den Anzeigemodus des Elements, indem wir den Wert des Anzeigeattributs ändern:

<!-- HTML 代码 -->
<div id="element">这是一个元素</div>

/* CSS 代码 */
#element {
  display: inline-block;
}

Der obige Code setzt das Anzeigeattribut des Elements mit der ID des Elements auf „inline-block“. , das heißt als Wird als Inline-Element auf Blockebene angezeigt. Beachten Sie, dass die Elemente hier nur ausgeblendet und angezeigt, nicht vollständig gelöscht werden.

2. Sichtbarkeitsattribut

Das Sichtbarkeitsattribut kann auch das Anzeigen und Ausblenden von Elementen steuern, aber im Gegensatz zum Anzeigeattribut ist das Sichtbarkeitsattribut ausgeblendet Verwenden des Sichtbarkeitsattributs Das Element nimmt immer noch Platz ein, es ist nur unsichtbar. In Situationen, in denen ein Element an seiner ursprünglichen Position Platz einnehmen soll, aber nicht angezeigt werden soll, können Sie das Sichtbarkeitsattribut verwenden.

Das Folgende ist ein Beispiel für die Verwendung des Sichtbarkeitsattributs zum Ausblenden von Elementen:

<!-- HTML 代码 -->
<div id="element">这是一个元素</div>

/* CSS 代码 */
#element {
  visibility: hidden;
}

Der obige Code verwendet das Sichtbarkeitsattribut, um das Element mit der ID von Element auszublenden, aber das Das Element belegt weiterhin die Position auf der Seite. Wie das Anzeigeattribut verfügt auch das Sichtbarkeitsattribut über andere Werte, z. B. „visible“ (Standardwert, der angibt, dass das Element sichtbar ist) und „collapse“ (wird für Tabellenelemente verwendet, was angibt, dass Zellen ausgeblendet und zusammengeführt werden) usw.

3. Fazit

Durch das Anzeigeattribut und das Sichtbarkeitsattribut können wir die Anzeige- und Ausblendfunktionen von Elementen einfach realisieren. Die Anwendung dieser Attribute ist nicht auf das Ausblenden von Elementen beschränkt, sondern kann auch zum Anpassen des Anzeigemodus, des Stils von Elementen usw. mit hoher Flexibilität verwendet werden. Bei der Entwicklung von Webseiten können Sie je nach Bedarf flexible Entscheidungen treffen.

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