So verstecken Sie Elemente in CSS3 (zwei Methoden)

Mit der versteckten CSS3-Technologie können Sie das Seitenlayout und die Inhaltsanzeige effektiv steuern.

Bei der Webseitenproduktion bietet CSS3 viele hervorragende Technologien, mit denen Entwickler das Layout und die Inhaltsanzeige von Webseiten flexibler steuern können. Unter diesen ist die CSS3-Ausblendungstechnologie eine sehr wichtige Technologie, mit der Sie einige Inhalte ausblenden können, die nicht auf der Webseite angezeigt werden müssen, wodurch die Seite prägnanter und klarer wird und eine bessere Benutzererfahrung bereitgestellt wird.

1. Übersicht

Auf Webseiten ist das Ausblenden von Elementen ein häufiger Vorgang, normalerweise weil die Seite Inhalte je nach Situation dynamisch anzeigen oder bestimmte Stileffekte erzielen muss. Wenn Sie ein Element auf einer Webseite ausblenden möchten, besteht der traditionelle Ansatz natürlich darin, sein Anzeigeattribut auf „Keine“ zu setzen. Obwohl diese Methode den Effekt des Ausblendens von Elementen erzielen kann, wird das ausgeblendete Element vollständig von der Seite entfernt und der von ihm belegte Layoutbereich verschwindet. Wenn es später angezeigt werden muss, muss das Layout neu erstellt werden. Verursacht unnötigen Ärger.

CSS3 bietet zwei Attribute, Sichtbarkeit und Deckkraft, mit denen Elemente ausgeblendet werden können, ohne sie von der Seite zu entfernen. Beide Eigenschaften steuern die Transparenz eines Elements, ihre Auswirkungen unterscheiden sich jedoch geringfügig. Das Sichtbarkeitsattribut kann ein Element ausblenden und seinen Layoutbereich beibehalten, während das Opazitätsattribut die Transparenz eines Elements steuern und seinen Layoutbereich auch dann beibehalten kann, wenn es unsichtbar ist.

2. Verwendung

① Verwenden Sie das Sichtbarkeitsattribut zum Ausblenden

Sie können das Sichtbarkeitsattribut des Elements auf „Ausblenden“ oder „Ausblenden“ setzen. Unter anderem bedeutet „versteckt“, dass das Element ausgeblendet wird und sein Layoutbereich auf der Seite erhalten bleibt. Die Einblendung gilt nur für Tabellenelemente, was darauf hinweist, dass Spalten oder Zeilen ausgeblendet werden und sein Layoutbereich auf der Seite eliminiert wird.

Das Folgende ist beispielsweise ein Beispielcode, der ein Element ausblendet und dann anzeigt:

<style type="text/css">
    .hidden {
        visibility: hidden;
    }
</style>

<div class="hidden">这是需要隐藏的内容</div>
<button onclick="document.querySelector(&#39;.hidden&#39;).style.visibility = &#39;visible&#39;">显示</button>

In diesem Beispielcode setzen Sie zunächst das Sichtbarkeitsattribut des Zielelements auf ausgeblendet, sein Layoutbereich bleibt jedoch weiterhin auf der Seite erhalten . Anschließend können Sie das Element erneut auf der Seite anzeigen, indem Sie seine Sichtbarkeitseigenschaft über JavaScript auf „Sichtbar“ setzen.

② Verwenden Sie das Opazitätsattribut, um ein Element auszublenden.

Um das Opazitätsattribut zum Ausblenden eines Elements zu verwenden, muss die Transparenz des Elements auf 0 gesetzt werden. Auf diese Weise bleibt der Layoutbereich des Elements auf der Seite erhalten, auch wenn es nicht sichtbar ist. Ebenso können Sie über JavaScript die Transparenz des Elements auf 1 setzen und es so wieder auf der Seite anzeigen.

Im Folgenden sehen Sie beispielsweise einen Beispielcode, der ein Element ausblendet und dann anzeigt:

<style type="text/css">
    .hidden {
        opacity: 0;
    }
</style>

<div class="hidden">这是需要隐藏的内容</div>
<button onclick="document.querySelector(&#39;.hidden&#39;).style.opacity = 1">显示</button>

In diesem Beispielcode setzen Sie zunächst das Deckkraftattribut des Zielelements auf 0, damit es ausgeblendet wird und auf der Seite verbleibt Bauraum auf. Anschließend können Sie das Element wieder anzeigen, indem Sie seine opacity-Eigenschaft per JavaScript auf 1 setzen.

3. Zusammenfassung

Bei der Webseitenerstellung ist das Ausblenden von Elementen ein sehr häufiger Vorgang. Die herkömmliche Methode zum Ausblenden von Elementen führt normalerweise zu unnötigen Layout-, Stil- und anderen Problemen auf der Seite. Die CSS3-Ausblendungstechnologie bietet zwei Attribute, Sichtbarkeit und Deckkraft, mit denen Elemente ausgeblendet und ihr Layoutraum beibehalten werden kann, wodurch ein effizienteres und einfacheres Seitenlayout und ein effizienterer Inhaltsanzeigeeffekt erzielt werden.

Das obige ist der detaillierte Inhalt vonSo verstecken Sie Elemente in CSS3 (zwei Methoden). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!