CSS ein- und ausblenden

CSS Ein- und Ausblenden

CSS (Cascading Style Sheet) ist eine Stylesheet-Sprache, die zur Beschreibung des Stils und Layouts von Webseiten verwendet wird. In der Webentwicklung sind CSS-Funktionen zum Ein- und Ausblenden sehr wichtig, die durch die Steuerung der Sichtbarkeit von HTML-Elementen erreicht werden können. In diesem Artikel werden die Implementierungsmethode und die Anwendung der CSS-Anzeige und -Ausblendung vorgestellt.

1. Grundlegende Syntax

In CSS wird die Sichtbarkeit eines Elements durch Festlegen seines Anzeigeattributs gesteuert. Die Werte des Anzeigeattributs lauten wie folgt:

1. none: Versteckt das Element und reserviert keinen Platz.
2. block: Das Element wird als Element auf Blockebene angezeigt und nimmt die gesamte Raumzeile ein.
3. inline: Das Element wird als Inline-Element angezeigt und nimmt Inline-Platz ein.
4. inline-block: Das Element wird als Inline-Block-Level-Element angezeigt, das Inline-Platz einnimmt, aber Breite und Höhe können festgelegt werden.
5. Tabelle: Das Element wird als Tabelle angezeigt. Zu diesem Zeitpunkt wird das Anzeigeattribut des Elements auf Tabellenzelle gesetzt und Tabellenzelle nimmt den Platz der Tabelle ein.
6. table-row: Das Element wird als Tabellenzeile angezeigt. Zu diesem Zeitpunkt wird das Anzeigeattribut des Elements auf table-cell gesetzt und table-cell belegt den Platz der Tabelle.
7. table-cell: Das Element wird als Tabellenzelle angezeigt und nimmt den Platz der Tabelle ein.

2. Implementierungsmethode

1. Anfängliches Ausblenden

Die einfachste Implementierungsmethode ist im CSS-Set Setzen Sie das Anzeigeattribut des Elements auf „none“. Im folgenden Code ist beispielsweise der Anfangszustand des div-Elements ausgeblendet:

div{
  display:none;
}

2. Zum Anzeigen anklicken

Durch JavaScript können Sie Sie können auf ein Element klicken, um es ein- oder auszublenden, wenn die Schaltfläche gedrückt wird. Definieren Sie zunächst eine Schaltfläche in HTML:

<button onclick="toggle()">点击显示/隐藏</button>

Hier wird ein Onclick-Ereignis definiert. Wenn auf die Schaltfläche geklickt wird, wird die Funktion toggle() ausgeführt. Zweitens setzen Sie in CSS das Anzeigeattribut des Elements auf „Keine“, wie unten gezeigt:

#box{
  display:none;
}

Zuletzt definieren Sie in JavaScript die Funktion toggle() zum Anzeigen oder Ausblenden, indem Sie das Anzeigeattribut des Elements ändern Element:

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

3. Anzeige, wenn die Maus darüber bewegt wird.

Ebenso können Sie JavaScript verwenden, um ein Element anzuzeigen oder auszublenden, wenn die Maus darüber bewegt wird . Definieren Sie in HTML ein Element:

<div onmouseover="show()" onmouseout="hide()">鼠标滑过显示/隐藏</div>

Hier werden die Ereignisse onmouseover und onmouseout definiert, die die Vorgänge darstellen, bei denen die Maus darüber gleitet bzw. geht. Zweitens setzen Sie in CSS das Anzeigeattribut des Elements wie folgt auf „none“:

#box{
  display:none;
}

Definieren Sie schließlich in JavaScript die Funktionen show() und hide():

function show(){
  var box = document.getElementById("box");
  box.style.display= "block";
}

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

#🎜 🎜#三、Anwendungsbeispiel

Popup-Box

Sie können die Popup-Box über das Anzeigeattribut von CSS anzeigen und ausblenden . Definieren Sie in HTML eine Schaltfläche und ein Popup-Fenster:

<button onclick="show()">点击弹窗</button>

<div id="dialog">
  <h2>弹窗标题</h2>
  <p>弹窗内容</p>
  <button onclick="hide()">关闭弹窗</button>
</div>

Setzen Sie dann in CSS das Anzeigeattribut des Popup-Fensters auf „Keine“, wie unten gezeigt:

#dialog{
  display:none;
  position:absolute;
  top:50%;
  left:50%;
  width:400px;
  height:300px;
  margin-left:-200px;
  margin-top:-150px;
  background:#fff;
  border:1px solid #ccc;
  padding:20px;
}

# 🎜🎜#Hier legen Sie die Breite, Höhe, Position, Hintergrundfarbe und andere Stile des Popup-Fensters fest. Definieren Sie abschließend in JavaScript die Funktionen show() und hide(), um die Anzeige bzw. das Ausblenden des Popup-Fensters zu steuern:

function show(){
  var dialog = document.getElementById("dialog");
  dialog.style.display= "block";
}

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

Picture Carousel

#🎜 🎜#
2. Durch das Anzeigeattribut von CSS kann der Umschalteffekt des Bildkarussells erreicht werden. Definieren Sie in HTML einen Bildcontainer und mehrere Bilder:

<div id="slider">
  <img src="img/1.jpg" />
  <img src="img/2.jpg" />
  <img src="img/3.jpg" />
  <img src="img/4.jpg" />
</div>

Legen Sie dann in CSS den Stil des Bildcontainers wie folgt fest:

#slider{
  width:500px;
  height:300px;
  overflow:hidden;
  position:relative;
}

#slider img{
  position:absolute;
  top:0;
  left:0;
  display:none;
  width:100%;
  height:100%;
}

Hier festlegen Die Breite, Höhe, Überlaufausblendung sowie Positions- und Anzeigeeigenschaften des Bildcontainers. Schließlich wird in JavaScript der Effekt eines Bildkarussells erreicht:

var imgs = document.querySelectorAll("#slider img");
var index = 0;

setInterval(function(){
  imgs[index].style.display = "none";
  index = (index + 1) % imgs.length;
  imgs[index].style.display = "block";
}, 2000);

Die Funktion setInterval wird hier verwendet, um alle 2 Sekunden ein Bild zu wechseln. Die spezifische Implementierungsmethode besteht darin, zuerst das Anzeigeattribut des aktuellen Bildes auf „Keine“ zu setzen, dann den Indexwert des nächsten Bildes zu berechnen und schließlich das Anzeigeattribut des Bildes auf „Blockieren“ zu setzen.

4. Zusammenfassung

Die Implementierungsmethode der CSS-Funktionen zum Anzeigen und Ausblenden ist sehr einfach, aber es handelt sich um eine grundlegende Fähigkeit in der Webentwicklung. In der tatsächlichen Entwicklung können über das Anzeigeattribut von CSS verschiedene Effekte erzielt werden, z. B. Popup-Fenster, Bildkarussells usw. Gleichzeitig können durch die Zusammenarbeit mit JavaScript reichhaltigere interaktive Effekte erzielt werden.

Das obige ist der detaillierte Inhalt vonCSS ein- und ausblenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!