So zeigen und verbergen Sie Elemente in CSS

CSS ist eine Sprache, die für das Webdesign verwendet wird. Sie kann die Lesbarkeit und Interaktivität von Webseiten verbessern und die Darstellung von Webelementen reichhaltiger machen. Unter anderem sind die Anzeige- und Ausblendfunktionen von CSS häufige Anforderungen im Webdesign-Prozess. In diesem Artikel wird ausführlich beschrieben, wie Elemente in CSS angezeigt und ausgeblendet werden.

1. Verwenden Sie das Anzeigeattribut

Das Anzeigeattribut von CSS kann den Anzeigemodus von Elementen steuern, einschließlich Block, Keine, Inline, Inline-Block usw. Unter anderem kann der Attributwert „none“ das Element ausblenden. Unter diesem Attributwert wird das Element nicht auf der Webseite angezeigt.

Zum Beispiel kann der folgende Code durch Klicken auf eine Schaltfläche Absätze anzeigen und ausblenden:

HTML-Code:

<button onclick="hide()">隐藏段落</button>
<p id="hide-me">这是一段话。</p>

CSS-Code:

#hide-me {
  display: block;
}

JavaScript-Code:

function hide() {
    var para = document.getElementById("hide-me");
    para.style.display = "none";
}

Im obigen Code wird beim Klicken auf die Schaltfläche die JavaScript-Code ruft das Absatzelement mit der ID „hide-me“ ab und ändert dann sein Anzeigeattribut, um den Effekt zu erzielen, dass das Element ausgeblendet wird.

2. Verwenden Sie das Sichtbarkeitsattribut

Das Sichtbarkeitsattribut von CSS kann die Sichtbarkeit von Elementen auf der Seite steuern. Unter anderem kann der versteckte Attributwert das Element verbergen. Unter diesem Attributwert nimmt das Element weiterhin Platz auf der Webseite ein.

Zum Beispiel kann der folgende Code durch Klicken auf eine Schaltfläche Absätze anzeigen und ausblenden:

HTML-Code:

<button onclick="hide()">隐藏段落</button>
<p id="hide-me">这是一段话。</p>

CSS-Code:

#hide-me {
  visibility: visible;
}

JavaScript-Code:

function hide() {
    var para = document.getElementById("hide-me");
    para.style.visibility = "hidden";
}

Im obigen Code wird beim Klicken auf die Schaltfläche die JavaScript-Code ruft das Absatzelement mit der ID „hide-me“ ab und ändert dann sein Sichtbarkeitsattribut, um den Effekt zu erzielen, dass das Element ausgeblendet wird.

3. Verwenden Sie das Opazitätsattribut

Das Opazitätsattribut von CSS kann die Transparenz des Elements steuern. Der allgemeine Attributwert ist eine Zahl von 0 bis 1, die die Opazität des Elements angibt. Dabei bedeutet 0 völlig transparent und 1 undurchsichtig. Indem wir das Opazitätsattribut des Elements auf 0 setzen, können wir das Element auch ausblenden.

Zum Beispiel kann der folgende Code Absätze durch Klicken auf eine Schaltfläche anzeigen und ausblenden:

HTML-Code:

<button onclick="hide()">隐藏段落</button>
<p id="hide-me">这是一段话。</p>

CSS-Code:

#hide-me {
  opacity: 1;
}

JavaScript-Code:

function hide() {
    var para = document.getElementById("hide-me");
    para.style.opacity = "0";
}

Wenn im obigen Code auf die Schaltfläche geklickt wird, wird die JavaScript-Code ruft das Paragraph-Element mit der ID „hide-me“ ab und ändert dann sein Deckkraftattribut, um den Effekt zu erzielen, dass das Element ausgeblendet wird.

4. Verwenden Sie das Z-Index-Attribut

In einigen Fällen müssen wir die Stapelreihenfolge verwenden, um das Ausblenden und Anzeigen von Elementen zu steuern. Das Z-Index-Attribut von CSS kann die Stapelreihenfolge von Elementen auf der Seite steuern, indem es die Ebene des Elements festlegt. Durch Anpassen des Z-Index-Attributwerts verschiedener Elemente können dann Ausblend- und Anzeigeeffekte erzielt werden.

Zum Beispiel kann der folgende Code Absätze durch Klicken auf eine Schaltfläche anzeigen und ausblenden:

HTML-Code:

<button onclick="hide()">隐藏段落</button>
<p id="hide-me" style="position: absolute; top: 50px; left: 50px; z-index: 1;">这是一段话。</p>

CSS-Code:

JavaScript-Code:

function hide() {
    var para = document.getElementById("hide-me");
    para.style.zIndex = "-1";
}

Im obigen Code wird beim Klicken auf die Schaltfläche das JavaScript Der Code erhält die ID Es handelt sich um das „hide-me“-Absatzelement und ändert dann sein Z-Index-Attribut, um den Effekt des Ausblendens des Elements zu erzielen.

Zusammenfassung

Die Anzeige- und Ausblendfunktionen in CSS werden sehr häufig verwendet. Sie können uns dabei helfen, das Anzeigen und Ausblenden verschiedener Elemente auf Webseiten zu steuern. Durch die Verwendung der Eigenschaften Anzeige, Sichtbarkeit, Deckkraft und Z-Index können wir problemlos den gewünschten Effekt erzielen und das Webdesign flexibler und vielfältiger gestalten.

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