html ausblenden anzeigen

HTML ein- und ausblenden

Im HTML-Code müssen Sie manchmal bestimmte Elemente ein- und ausblenden. In diesem Artikel besprechen wir verschiedene Möglichkeiten zum Ein- und Ausblenden von Elementen in HTML.

1. Verwenden Sie das Anzeigeattribut

Das Anzeigeattribut wird verwendet, um den Anzeigemodus eines Elements anzugeben. Es hat die folgenden optionalen Werte:

• none: Das Element wird nicht angezeigt und nimmt keinen Platz ein.
• Block: Elemente werden auf Blockebene angezeigt, mit Zeilenumbrüchen davor und danach.
• inline: Elemente werden inline angezeigt, ohne Zeilenumbrüche davor und danach.
• inline-block: Das Element wird auf Inline-Blockebene angezeigt, ohne Zeilenumbrüche davor und danach, aber Attribute wie Breite und Höhe können festgelegt werden.

Durch Festlegen des Anzeigeattributs können Elemente ausgeblendet und angezeigt werden:

<div id="myDiv" style="display: none;">这是一个被隐藏的 div。</div>
<button onclick="document.getElementById('myDiv').style.display='block'">显示</button>
<button onclick="document.getElementById('myDiv').style.display='none'">隐藏</button>

Im obigen Code setzen wir zunächst das Anzeigeattribut des div-Elements über das Stilattribut auf „none“, d. h. das Element wird ausgeblendet. Anschließend wird der Schaltflächenklickvorgang über die Onclick-Ereignisse der beiden Schaltflächenelemente und JavaScript implementiert, wodurch der Anzeigestatus des Elements geändert wird.

2. Sichtbarkeitsattribut verwenden

Sichtbarkeitsattribut wird verwendet, um die Sichtbarkeit eines Elements anzugeben. Es hat die folgenden optionalen Werte:

• visible: Das Element ist sichtbar.
• versteckt: Das Element ist unsichtbar, nimmt aber dennoch Platz ein.

Durch Festlegen des Sichtbarkeitsattributs kann das Element ausgeblendet und angezeigt werden:

<div id="myDiv" style="visibility: hidden;">这是一个被隐藏的 div。</div>
<button onclick="document.getElementById('myDiv').style.visibility='visible'">显示</button>
<button onclick="document.getElementById('myDiv').style.visibility='hidden'">隐藏</button>

Im obigen Code setzen wir zunächst das Sichtbarkeitsattribut des div-Elements über das Stilattribut auf ausgeblendet, d. h. das Element wird ausgeblendet. Anschließend wird der Schaltflächenklickvorgang über die Onclick-Ereignisse der beiden Schaltflächenelemente und JavaScript implementiert, wodurch der Anzeigestatus des Elements geändert wird.

3. Verwenden Sie das Opazitätsattribut

Das Opazitätsattribut wird verwendet, um die Transparenz des Elements anzugeben. Der Wertebereich liegt zwischen 0 und 1, 0 bedeutet vollständig transparent und 1 bedeutet undurchsichtig. Durch Festlegen des Deckkraftattributs können Sie die Ausblend- und Ausblendeffekte des Elements erzielen:

<div id="myDiv" style="opacity: 0;">这是一个被隐藏的 div。</div>
<button onclick="show()">显示</button>
<button onclick="hide()">隐藏</button>

<script>
  function show() {
    var div = document.getElementById("myDiv");
    div.style.opacity = 1;
    div.style.transition = "opacity 1s";
  }
  
  function hide() {
    var div = document.getElementById("myDiv");
    div.style.opacity = 0;
    div.style.transition = "opacity 1s";
  }
</script>

Im obigen Code erzielen wir die Ausblend- und Ausblendeffekte des div-Elements durch Festlegen des Deckkraftattributs und Übergangsattribut des div-Elements. Wenn Sie auf die Schaltfläche klicken, setzen Sie das Deckkraftattribut des div-Elements über JavaScript auf den entsprechenden Wert (0 oder 1) und setzen Sie dann das Übergangsattribut auf die entsprechende Zeit, um den Ausblend- und Ausblendeffekt zu erzielen.

Zusammenfassung

Die oben genannten drei Methoden können alle den Versteck- und Anzeigeeffekt von HTML-Elementen erzielen, können jedoch in unterschiedlichen Situationen unterschiedliche Nutzungseffekte haben. Es ist notwendig, die geeignete Methode entsprechend den spezifischen Anforderungen und Szenarien auszuwählen.

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