div CSS anzeigen div ausblenden

CSS-Tipps: DIV über das Anzeigeattribut anzeigen und ausblenden

Als eines der am häufigsten verwendeten Elemente in Seiten wird DIV häufig für Layout, Formatierung und Inhaltssegmentierung verwendet. In der tatsächlichen Entwicklung müssen wir manchmal das Anzeigen und Ausblenden eines DIV-Elements über Code steuern. In diesem Fall können wir das Anzeigeattribut von CSS verwenden.

Die Rolle des Anzeigeattributs

Das Anzeigeattribut ist ein grundlegendes Attribut in CSS, mit dem gesteuert wird, ob ein Element angezeigt wird. Es kann auf verschiedene Werte eingestellt werden, um unterschiedliche Anzeige- und Ausblendeffekte zu erzielen. Im Einzelnen lauten die Werte des Anzeigeattributs wie folgt:

1. none: Das Ausblenden des Elements entspricht dem vollständigen Entfernen des Platzes des Elements auf der Seite. Das Element belegt keinen Platz und wird nicht gerendert.
2. Block: Zeigt das Element als Element auf Blockebene an, d. h. das Element belegt eine exklusive Zeile und wird automatisch vor und nach der Beschriftung umbrochen. Sie können Stile wie Breite, Höhe, Ränder und Abstand festlegen.
3. inline: Zeigt das Element als Inline-Element an, das heißt, das Element belegt keine exklusive Zeile und wird am Ende automatisch umbrochen. Stile wie Breite, Höhe, Ränder und Abstand können nicht festgelegt werden.
4. inline-block: Elemente als Inline-Blockelemente anzeigen, die die Eigenschaften von Elementen auf Blockebene aufweisen. Sie können auch festlegen, dass mehrere Inline-Elemente in derselben Zeile angezeigt werden.
5. Tabelle, Tabellenzeile, Tabellenzelle usw.: Elemente als Tabelle und ihre Zellelemente anzeigen.

Anzeige und Ausblenden von DIV realisieren

Als nächstes werden wir anhand mehrerer Beispiele demonstrieren, wie das Anzeigeattribut zum Anzeigen und Ausblenden von DIV verwendet wird.

1. Klicken Sie auf die Schaltfläche, um DIV anzuzeigen und auszublenden.

In diesem Beispiel steuern wir das Anzeigen und Ausblenden von DIV über eine Schaltfläche.

HTML-Teil:

      
  点击显示/隐藏DIV 
这是一个DIV元素
   

CSS-Teil:

#myDiv { width: 200px; height: 200px; background-color: #ccc; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

JavaScript-Teil:

function toggle() { var div = document.getElementById("myDiv"); if (div.style.display === "none") { div.style.display = "block"; } else { div.style.display = "none"; } }

In diesem Beispiel haben wir ein Onclick-Ereignis zum Schaltflächenelement von HTML hinzugefügt und eine Umschaltfunktion definiert. Diese Funktion ruft das DIV-Element ab, das wir über die Methode getElementById steuern müssen, und realisiert dann die Anzeige- und Ausblendeffekte durch Beurteilen des Anzeigeattributwerts des Elements.

Wenn wir auf die Schaltfläche klicken, bestimmt die Umschaltfunktion, ob der Anzeigeattributwert des aktuellen DIV-Elements „none“ ist. Wenn ja, wird es auf „Blockieren“ gesetzt, das heißt, es wird angezeigt auf none gesetzt, das heißt, es wird ausgeblendet.

2. Verwenden Sie den :hover-Selektor, um DIVs anzuzeigen und auszublenden.

In diesem Beispiel steuern wir das Anzeigen und Ausblenden von DIVs, indem wir mit der Maus über das Element fahren.

HTML-Teil:

      
  
 
鼠标悬停在这里，显示下面的DIV元素
 
这是一个DIV元素
 
  

CSS-Teil:

#myDiv { width: 200px; height: 80px; background-color: #eee; position: relative; } #myPopup { width: 100px; height: 100px; background-color: #ddd; display: none; position: absolute; top: 100%; left: 0; } #myDiv:hover #myPopup { display: block; }

In diesem Beispiel verwenden wir: Hover-Selektor, um DIV-Elemente anzuzeigen und auszublenden. Wenn die Maus über das myDiv-Element fährt, wird das myPopup-Element angezeigt. Wenn die Maus das myDiv-Element verlässt, wird das myPopup-Element ausgeblendet. Zu diesem Zeitpunkt müssen wir nur den Anzeigeattributwert des myPopup-Elements auf „none“ oder „block“ setzen.

3. Verwenden Sie die CSS3-Übergangsanimation, um DIV anzuzeigen und auszublenden.

In diesem Beispiel verwenden wir den CSS3-Übergangsanimationseffekt, um die Anzeige und Ausblendung von DIV-Elementen reibungsloser und natürlicher zu gestalten.

HTML-Teil:

      
  点击显示/隐藏DIV 
这是一个DIV元素
   

CSS-Teil:

#myDiv { width: 200px; height: 200px; background-color: #ccc; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .3s ease-in-out; }

JavaScript-Teil:

function toggle() { var div = document.getElementById("myDiv"); if (div.style.opacity === "0") { div.style.display = "block"; div.style.opacity = "1"; } else { div.style.opacity = "0"; setTimeout(function() {div.style.display = "none";}, 300); } }

In diesem Beispiel definieren wir einen All-.3s-Ease-in-out-Übergangseffekt für das myDiv-Element in CSS, sodass, wenn wir When the Wenn der Anzeigeattributwert oder der Opazitätsattributwert des myDiv-Elements geändert wird, wird entsprechend diesem Effekt ein sanfter Übergang durchgeführt.

In JavaScript verwenden wir die Funktion setTimeout, um die Ausführung eines Codeblocks zu verzögern und auf den Abschluss des Übergangseffekts zu warten. Wenn wir auf die Schaltfläche klicken, bestimmt die Umschaltfunktion, ob der Deckkraftattributwert des aktuellen DIV-Elements 0 ist. Wenn ja, wird er auf 1 gesetzt und der Anzeigeattributwert wird auf Block gesetzt, also angezeigt. Wenn nicht, wird es auf 0 gesetzt, dann wird gewartet, bis der Übergang abgeschlossen ist, und schließlich wird der Wert des Anzeigeattributs auf „Keine“ gesetzt, das heißt, es wird ausgeblendet.

Zusammenfassung

Anhand der obigen drei Beispiele können wir sehen, dass das Anzeigeattribut von CSS den Anzeige- und Ausblendeffekt von DIV-Elementen leicht realisieren kann, und während des Implementierungsprozesses können wir die Hilfe von JavaScript und CSS3 verwenden, um dies zu erreichen Wirkung reicher und natur. Ich hoffe, dieser Artikel kann jedem helfen, das Anzeigeattribut von CSS zu beherrschen!

Das obige ist der detaillierte Inhalt vondiv CSS anzeigen div ausblenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!