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";
}

Popup-Box

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

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

#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;
}

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

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

#🎜 🎜#
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>

Nach dem Login kopieren

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

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

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);

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!