자바스크립트 버튼 표시 숨기기-프런트엔드 Q&A-php.cn

자바스크립트 버튼 표시 숨기기

PHPz

풀어 주다： 2023-05-12 11:23:06

원래의

6167명이 탐색했습니다.

인터넷 기술의 지속적인 발전과 함께 Javascript(이하 JS)는 보편화된 기술이 되었습니다. 표현력, 유연성 및 기타 특성으로 인해 JS는 더 이상 웹 사이트 개발의 액세서리가 아니라 웹 페이지 상호 작용 및 동적 효과의 핵심이 되었습니다. 이 기사에서는 JS의 기본 작업인 버튼을 클릭하여 콘텐츠를 표시하거나 숨기는 방법을 소개합니다.

1. 기본 구문

버튼 표시 및 숨기기 방법을 소개하기 전에 JS의 기본 구문 지식을 이해해야 합니다. 웹페이지 HTML 파일에서 <script> 태그를 통해 웹페이지에 JS 코드를 삽입하여 웹페이지 요소를 제어할 수 있습니다. 다음은 HTML 문서에 JS를 삽입하는 일반적인 형식입니다. <script>标签将JS代码嵌入到网页中，达到控制网页元素的目的。以下是HTML文档中嵌入JS的一般格式：

<html>
  <head>
    <script>
      JS代码内容
    </script>
  </head>
  <body>
    HTML文档正文
  </body>
</html>

로그인 후 복사

在JS中，我们通常使用document.getElementById()函数来获取网页元素。该函数会根据id属性的值获取对应的HTML元素，并返回该元素的对象。例如：

<button id="btn">点击我</button>
<script>
  var btn = document.getElementById("btn");
</script>

로그인 후 복사

上述代码就可以获取一个id为“btn”的按钮元素，然后将其赋值给变量btn。接下来，我们可以使用JS来控制该按钮的显示/隐藏。

二、点击按钮显示/隐藏

1、控制按钮的显示/隐藏

在JS中，我们可以利用CSS样式的display属性来控制元素的显示或隐藏。当display属性的值为none时，该元素会被隐藏；当display属性的值为block时，该元素会被显示。

因此，我们只需要创建一个按钮并绑定其点击事件，在点击事件中将被控制元素的display属性设置为none或block即可实现该元素的显示/隐藏。

以下是一个简单的实现方法：

<button onclick="toggle()">点击我</button>
<div id="content" style="display:none;">需要显示/隐藏的内容</div>
<script>
  function toggle() {
    var content = document.getElementById("content");
    if (content.style.display === "none") {
      content.style.display = "block";
    } else {
      content.style.display = "none";
    }
  }
</script>

로그인 후 복사

上述代码中，我们创建了一个按钮，并在其onclick事件中绑定了函数toggle()，该函数用于控制需要显示/隐藏的元素。在该函数中，我们通过document.getElementById()函数获取到id="content"的元素，并将其赋值给变量content。接下来，我们判断该元素的display属性值是否为none，如果是，则将其设置为block；如果不是，则将其设置为none。

2、控制多个元素的显示/隐藏

上述方法只能控制单个元素的显示/隐藏，如果需要控制多个元素，则需要进行相应修改。我们可以将需要控制的元素封装在同一个父级元素内，并在父级元素的onclick事件中进行遍历，然后通过元素的style.display属性来控制其子元素的显示/隐藏。

以下是一个实现方法：

<button onclick="toggle()">点击我</button>
<div id="wrapper">
  <div class="content" style="display:none;">需要显示/隐藏的内容 1</div>
  <div class="content" style="display:none;">需要显示/隐藏的内容 2</div>
  <div class="content" style="display:none;">需要显示/隐藏的内容 3</div>
</div>
<script>
  function toggle() {
    var wrapper = document.getElementById("wrapper");
    var contents = wrapper.getElementsByClassName("content");
    for (var i = 0; i < contents.length; i++) {
      var content = contents[i];
      if (content.style.display === "none") {
        content.style.display = "block";
      } else {
        content.style.display = "none";
      }
    }
  }
</script>

로그인 후 복사

上述代码中，我们将需要控制的三个元素封装在id="wrapper"的父级元素内。在点击事件触发时，toggle()函数会首先获取到父级元素对象wrapper，然后通过wrapper.getElementsByClassName()方法获取到所有class="content"的元素，并将其存放在数组contents中。接下来，我们使用for循环遍历该数组中所有元素，并判断其display属性的值是否为none，然后将其设置为block或nonerrreee

JS에서는 일반적으로 document.getElementById() 함수를 사용하여 웹 페이지 요소를 가져옵니다. 이 함수는 id 속성의 값을 기반으로 해당 HTML 요소를 얻고 요소의 객체를 반환합니다. 예:

rrreee

위 코드는 ID가 "btn"인 버튼 요소를 가져온 다음 이를 btn 변수에 할당할 수 있습니다. 다음으로 JS를 사용하여 버튼 표시/숨기기를 제어할 수 있습니다.

2. 버튼을 클릭하여 표시/숨기기🎜🎜1. 버튼 표시/숨기기를 제어합니다.🎜🎜JS에서는 CSS 스타일의 display 속성을 사용하여 표시 또는 숨기기를 제어할 수 있습니다. 요소의. display 속성 값이 none이면 display 속성 값이

block , 요소가 표시됩니다. 🎜🎜따라서 버튼을 만들고 클릭 이벤트를 바인딩하기만 하면 됩니다. 클릭 이벤트에서 제어되는 요소의 <code>display

속성을 none 또는 로 설정하세요. 블록 을 사용하여 요소를 표시하거나 숨길 수 있습니다. 🎜🎜다음은 간단한 구현 방법입니다. 🎜rrreee🎜위 코드에서 버튼을 만들고 onclick 이벤트에 toggle() 함수를 바인딩합니다. 표시/숨겨야 하는 요소를 제어하는 데 사용됩니다. 이 함수에서는 document.getElementById() 함수를 통해 id="content" 요소를 가져와 content 변수에 할당합니다. . 다음으로, 요소의 display 속성 값이 none인지 확인합니다. 그렇다면 block으로 설정하고, 그렇지 않으면 설정합니다. 없음으로 설정하세요. 🎜🎜2. 여러 요소의 표시/숨기기 제어🎜🎜위 방법은 단일 요소의 표시/숨기기만 제어할 수 있습니다. 여러 요소를 제어해야 하는 경우 그에 맞게 수정해야 합니다. 동일한 상위 요소에서 제어해야 하는 요소를 캡슐화하고 상위 요소의 onclick 이벤트를 순회한 다음 해당 요소의 style.display 속성을 사용하여 하위 요소를 표시/숨깁니다. 🎜🎜다음은 구현 방법입니다. 🎜rrreee🎜위 코드에서는 id="wrapper"의 상위 요소 내에 제어해야 하는 세 가지 요소를 캡슐화했습니다. 클릭 이벤트가 트리거되면 toggle() 함수는 먼저 상위 요소 객체 wrapper를 얻은 다음

wrapper.getElementsByClassName() 메소드를 모든 class="content" 요소에 추가하고 contents 배열에 저장합니다. 다음으로 for를 사용하여 배열의 모든 요소를 반복하고 해당 display 속성 값이 none인지 확인한 다음 차단 또는 없음으로 설정하세요. 🎜🎜3. 요약🎜🎜이 문서에서는 기본 JS 작업을 소개합니다. 요소 콘텐츠를 표시하거나 숨기려면 버튼을 클릭하세요. JS 구문의 일부 소개와 특정 구현 방법의 시연을 통해 모든 사람이 이 기술을 더 잘 익힐 수 있다고 믿습니다. JS는 주의해서 작성해야 합니다. 특히 DOM 객체를 참조할 때 예상치 못한 오류가 발생하지 않도록 객체가 로드되었는지 확인하세요. 🎜

위 내용은 자바스크립트 버튼 표시 숨기기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!