JavaScript-Ausblendschaltfläche

1. Verwenden Sie die Visibility-Eigenschaft, um die Schaltfläche in JavaScript auszublenden
2. Verwenden Sie die Display-Eigenschaft, um die Schaltfläche in JavaScript auszublenden

Im heutigen Beitrag erfahren wir, wie man Schaltflächen in JavaScript ausblendet.

Verwenden Sie die Visibility-Eigenschaft, um die Schaltfläche in JavaScript auszublenden

Die CSS-Eigenschaft visibility blendet ein Element ein oder aus, ohne das Layout eines Dokuments zu beeinflussen.

Syntax:

visibility: hidden;

Die Elementbox ist unsichtbar, wirkt sich aber wie gewohnt auf das Layout aus. Die Nachkommen des Elements sind sichtbar, wenn ihre Sichtbarkeit auf sichtbar gesetzt ist.

Die Verwendung eines versteckten Sichtbarkeitswerts für ein Element entfernt es aus dem Barrierefreiheitsbaum. Infolgedessen kündigt die Screenreader-Technologie das Element und alle seine untergeordneten Elemente nicht mehr an.

Sichtbarkeitswerte werden zwischen sichtbar und unsichtbar umgeschaltet. Daher muss einer der Start- oder Endwerte sichtbar sein, oder es kann keine Interpolation durchgeführt werden.

Der Wert wird als diskreter Schritt interpoliert, wobei dem sichtbaren Endpunkt Zeitfunktionswerte zwischen 0 und 1 und dem nächsten Endpunkt andere Zeitfunktionswerte zugewiesen werden.

Weitere Informationen zur Eigenschaft finden Sie in der Dokumentation Sichtbarkeit.

Nehmen wir ein Beispiel für das Ein- und Ausblenden des Buttons in JavaScript mit der Eigenschaft visibility.

<input type="button" id="btn-1" value="Show" onClick="hideAction()" />
<input type="button" id="btn-2" value="Hide" onClick="hideAction()"/>

let hidden = false;

function hideAction() {
  hidden = !hidden;
  if (hidden) {
    document.getElementById('btn-1').style.visibility = 'hidden';
  } else {
    document.getElementById('btn-1').style.visibility = 'visible';
  }
}

Im obigen Beispiel haben wir zwei Schaltflächen definiert. Die erste Schaltfläche wird basierend auf dem Wert der Umschaltschaltfläche angezeigt und ausgeblendet.

Die zweite Schaltfläche schaltet die Sichtbarkeit der vorherigen Schaltfläche um.

Führen Sie das obige Code-Snippet in jedem Browser aus, der JavaScript unterstützt. es wird das folgende Ergebnis zeigen.

Ausgang:

Schaltfläche ausblenden:

Verwenden Sie die Display-Eigenschaft, um die Schaltfläche in JavaScript auszublenden

Die CSS-Eigenschaft display bestimmt, ob ein Element als Block- oder Inline-Element behandelt wird und welches Layout für seine untergeordneten Elemente verwendet wird, z. B. Flow-, Grid- oder Flex-Layout.

Syntax:

display: block;
display: none;

Die Eigenschaft Anzeige spezifiziert die inneren und äußeren Darstellungsarten eines Elements. Der externe Typ bestimmt die Teilnahme eines Elements am Flusslayout; Der innere Typ bestimmt das Design des Kindes.

Einige Anzeigewerte sind in ihren Spezifikationen vollständig definiert. Was beispielsweise passiert, wenn display: flex deklariert wird, ist in der CSS-Flexbox-Modellspezifikation definiert.

Weitere Informationen zur Eigenschaft finden Sie in der Anzeige-Dokumentation.

Nehmen wir ein Beispiel für das Ein- und Ausblenden der Schaltfläche in JavaScript mithilfe der Eigenschaft display.

<input type="button" id="btn-3" value="Show" onClick="displayAction()" />
<input type="button" id="btn-4" value="Toggle" onClick="displayAction()"/>

function displayAction() {
  hidden = !hidden;
  if (hidden) {
    document.getElementById('btn-3').style.display = 'none';
  } else {
    document.getElementById('btn-3').style.display = 'block';
  }
}

Im obigen Beispiel haben wir zwei Schaltflächen definiert. Die erste Schaltfläche wird basierend auf dem Wert der Umschaltschaltfläche angezeigt und ausgeblendet.

Die zweite Schaltfläche schaltet die Anzeige-Eigenschaft der vorherigen Schaltfläche um.

Führen Sie das obige Code-Snippet in jedem Browser aus, der JavaScript unterstützt. es wird das folgende Ergebnis zeigen.

Ausgang:

Demo hier