버튼을 클릭할 때 JavaScript를 사용하여 숨겨진 텍스트를 표시하는 방법은 무엇입니까?

JavaScript를 사용하여 버튼을 클릭하여 숨겨진 텍스트를 표시하는 기능을 구현하는 방법은 무엇입니까?

프런트 엔드 개발에서는 일부 텍스트 내용을 표시하거나 숨기기 위해 버튼을 클릭해야 하는 경우가 종종 있습니다. 이 기능은 JavaScript를 사용하여 쉽게 구현할 수 있습니다. 이 문서에서는 JavaScript를 사용하여 텍스트 표시 및 숨김 상태를 전환하는 방법을 설명하고 구체적인 코드 예제를 제공합니다.

먼저 HTML에 버튼을 추가하고 전환해야 하는 숨겨진 텍스트 콘텐츠를 추가하세요.

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

위 코드에서는 버튼을 추가하고 고유 ID toggleButton을 부여했습니다. <div> 요소에서 display: none; 스타일을 설정하여 처음에 텍스트 내용을 숨깁니다. 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

위 내용은 버튼을 클릭할 때 JavaScript를 사용하여 숨겨진 텍스트를 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!