如何使用 JavaScript 實作點擊按鈕顯示隱藏文字的功能？

如何使用 JavaScript 實作點擊按鈕顯示隱藏文字的功能？

在前端開發中，經常會遇到需要點擊按鈕來顯示或隱藏一些文字內容的需求。使用 JavaScript 可以輕鬆實現這個功能。本文將教你如何使用 JavaScript 切換文字的顯示和隱藏狀態，並提供具體的程式碼範例。

首先，在HTML 中新增一個按鈕和需要切換顯示隱藏的文字內容：

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

上述程式碼中，我們新增了一個按鈕，並給它一個唯一的id 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 屬性。如果為 "none"，則將其設為 "block"，以顯示文字內容；如果為 "block"，則將其設為 "none"，以隱藏文字內容。

現在，你可以在瀏覽器中運行程式碼，並點擊按鈕來切換顯示和隱藏文字內容。

以上就是使用 JavaScript 實作點擊按鈕顯示隱藏文字的功能的詳細步驟和程式碼範例。透過簡單的 JavaScript 程式碼，你可以輕鬆實現這個功能，為你的網頁添加互動性和使用者體驗。

以上是如何使用 JavaScript 實作點擊按鈕顯示隱藏文字的功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！