Wie verwende ich JavaScript, um versteckten Text anzuzeigen, wenn ich auf eine Schaltfläche klicke?

Wie verwende ich JavaScript, um die Funktion zum Klicken auf eine Schaltfläche zu implementieren, um versteckten Text anzuzeigen?

Bei der Frontend-Entwicklung müssen wir häufig auf eine Schaltfläche klicken, um Textinhalte anzuzeigen oder auszublenden. Diese Funktionalität kann einfach mit JavaScript implementiert werden. In diesem Artikel erfahren Sie, wie Sie mit JavaScript den Anzeige- und Ausblendungsstatus von Text ändern, und stellen spezifische Codebeispiele bereit.

Fügen Sie zunächst eine Schaltfläche in HTML und den verborgenen Textinhalt hinzu, der umgeschaltet werden muss:

<button id="toggleButton">点击切换显示/隐藏</button>
<div id="textContent" style="display: none;">
    这是切换显示/隐藏的文本内容。
</div>

Im obigen Code haben wir eine Schaltfläche hinzugefügt und ihr eine eindeutige ID toggleButton gegeben. Im Element <div> legen wir den Stil von display: none; fest, um den Textinhalt zunächst auszublenden. toggleButton。在 <div> 元素中，我们设置了 display: none; 的样式，来初始隐藏文本内容。

接下来，我们使用 JavaScript 来实现切换显示和隐藏的功能。在 HTML 文件中添加以下代码块：

<script>
    var toggleButton = document.getElementById("toggleButton");
    var textContent = document.getElementById("textContent");

    toggleButton.addEventListener("click", function() {
        if (textContent.style.display === "none") {
            textContent.style.display = "block";
        } else {
            textContent.style.display = "none";
        }
    });
</script>

上述代码中，我们首先获取了具有唯一 id 的按钮和文本内容的元素。然后，我们使用 addEventListener 来添加一个点击事件监听器，当按钮被点击时，执行对应的函数。

事件监听器中的函数逻辑很简单：检查文本内容的 display

rrreee

Das obige ist der detaillierte Inhalt vonWie verwende ich JavaScript, um versteckten Text anzuzeigen, wenn ich auf eine Schaltfläche klicke?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!