Heim >Web-Frontend >CSS-Tutorial >Wie kann ich ein DIV-Element per Knopfdruck ein- und ausblenden?

Wie kann ich ein DIV-Element per Knopfdruck ein- und ausblenden?

Patricia Arquette
Patricia ArquetteOriginal
2024-12-18 01:20:101066Durchsuche

How to Show and Hide a DIV Element with a Button Click?

Wie schalte ich die Sichtbarkeit eines DIV mithilfe einer Schaltfläche um?

Viele Webanwendungen erfordern die Möglichkeit, Elemente auf der Seite anzuzeigen oder auszublenden, z. B. ein Div. Dies kann einfach mit JavaScript erreicht werden. So können Sie die Sichtbarkeit eines Div mit einer Schaltfläche umschalten:

Reines JavaScript:

Dieser Ansatz verwendet die style.display-Eigenschaft des div-Elements. Wenn auf die Schaltfläche geklickt wird, wird ein Klickereignis-Listener ausgelöst, der prüft, ob das Div derzeit sichtbar ist (d. h. style.display ist nicht „none“). Wenn dies der Fall ist, wird das Div ausgeblendet, indem style.display auf „none“ gesetzt wird. Andernfalls wird es angezeigt, indem style.display auf „block“ gesetzt wird.

var button = document.getElementById('button'); // Assumes element with>

jQuery:

jQuery bietet einen einfacheren Ansatz zum Umschalten der Sichtbarkeit eines Elements . Die Methode toggle() schaltet die Sichtbarkeit des ausgewählten Elements um. Beim Klicken löst der Click-Event-Listener die toggle()-Methode für das Div mit der ID „newpost“ aus.

$("#button").click(function() { 
    // assumes element with>

Das obige ist der detaillierte Inhalt vonWie kann ich ein DIV-Element per Knopfdruck ein- und ausblenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn