JavaScript-Elemente aus-/einblenden

1. Verwenden Sie die Eigenschaft style.visibility, um HTML-Elemente auszublenden/einzublenden
2. Verwenden Sie die Eigenschaft style.display, um HTML-Elemente auszublenden/einzublenden
3. Verwenden Sie jQuerys hide() / show(), um HTML-Elemente auszublenden/einzublenden
4. Verwenden Sie jQuery toggle(), um HTML-Elemente auszublenden/einzublenden
5. Verwenden Sie addClass()/removeClass(), um HTML-Elemente auszublenden/einzublenden

Wir stoßen oft auf Situationen, in denen wir zwischen dem Anzeigen und Ausblenden eines Elements hin- und herschalten möchten. In diesem Tutorial wird erläutert, wie Sie ein Element in JavaScript aus-/einblenden.

Verwenden Sie die Eigenschaft style.visibility, um HTML-Elemente auszublenden/einzublenden

Wenn die Eigenschaft style.visibility auf hidden gesetzt ist, wird das Zielelement ausgeblendet, aber nicht aus dem Flow entfernt. Das Zielelement wird also gerendert, aber nicht sichtbar. Es beeinflusst das Layout nicht und ermöglicht es anderen Elementen, ihren natürlichen Raum einzunehmen. Wir können das Zielelement wieder sichtbar machen, indem wir die Eigenschaft wieder auf visible setzen.

document.getElementById(id).style.visibility = 'visible';  // show
document.getElementById(id).style.visibility = 'hidden';   // hide

Verwenden Sie die Eigenschaft style.display, um HTML-Elemente auszublenden/einzublenden

Die Eigenschaft style.display, wenn sie auf none gesetzt ist, entfernt das Zielelement aus dem normalen Fluss der Seite und lässt den Rest der Elemente seinen Platz einnehmen. Obwohl das Zielelement auf der Seite nicht sichtbar ist, können wir dennoch über DOM damit interagieren. Alle Nachkommen sind betroffen und werden nicht wie das übergeordnete Element angezeigt. Wir können das Zielelement wieder sichtbar machen, indem wir die Eigenschaft auf blockieren setzen. Es empfiehlt sich, display auf '' zu setzen, da block einem Element einen Rand hinzufügt.

document.getElementById(id).style.display = 'none';  // hide
document.getElementById(id).style.display = '';      // show

Verwenden Sie jQuerys hide() / show(), um HTML-Elemente auszublenden/einzublenden

Die Methode show() hilft uns, durch display:none oder jQuery hide() versteckte Elemente anzuzeigen. Es ist nicht in der Lage, Elemente anzuzeigen, deren Sichtbarkeit ausgeblendet ist. Es akzeptiert die folgenden drei Parameter:

1. Speed: Gibt die Geschwindigkeit der Verzögerung des Fading-Effekts an.
2. Easing: Gibt die Easing-Funktion an, die für den Übergang in einen sichtbaren/versteckten Zustand verwendet wird. Er nimmt zwei verschiedene Werte an: swing und linear.
3. Callback: Dies ist eine Funktion, die ausgeführt wird, nachdem die Ausführung der Methode show() abgeschlossen ist.

Ebenso hilft die jQuery-Methode hide(), die ausgewählten Elemente auszublenden. Es verwendet die gleichen 3 Parameter wie show().

$('#element').hide();  // hide
$('#element').show();  // show

Verwenden Sie jQuery toggle(), um HTML-Elemente auszublenden/einzublenden

Die jQuery toggle() ist eine spezielle Methode, mit der wir zwischen den Methoden hide() und show() umschalten können. Es hilft, versteckte Elemente sichtbar und sichtbare Elemente auszublenden. Es verwendet auch die gleichen drei Parameter wie die Methoden hide() und show() von jQuery. Es braucht auch eine vierte Parameteranzeige, die hilft, den Ausblenden/Einblenden-Effekt umzuschalten. Es ist ein boolescher Parameter, der, wenn er auf false gesetzt ist, das Element ausblendet.

$('div.d1').toggle(500, swing);  // toggle hide and show

Verwenden Sie addClass()/removeClass(), um HTML-Elemente auszublenden/einzublenden

Die Funktion addClass() hilft uns, eine Klasse zur bestehenden Klassenliste eines Elements hinzuzufügen, und removeClass() hilft uns, sie zu entfernen. Wir können diese Funktionen verwenden, um das Ausblenden/Einblenden umzuschalten, indem wir eine benutzerdefinierte Klasse schreiben, die das Element ausblendet und es dann zur Klassenliste hinzufügt und daraus entfernt.

.hidden{display: none} $('div').addClass('hidden');  // hide
$('div').removeClass('hidden');                      // show