javascript button show hide-Front-end Q&A-php.cn

javascript button show hide

PHPz

Release： 2023-05-12 11:23:06

Original

6167 people have browsed it

With the continuous development of Internet technology, Javascript (hereinafter referred to as JS) has become a pervasive technology. Due to its strong expressiveness, flexibility and other characteristics, JS is no longer an accessory to website development, but has become the core of web page interaction and dynamic effects. This article will introduce a basic operation of JS: how to display/hide content by clicking a button.

1. Basic syntax

Before introducing how to display and hide buttons, we need to understand some basic syntax knowledge of JS. In the web page HTML file, we can embed JS code into the web page through the <script> tag to control the web page elements. The following is the general format for embedding JS in HTML documents:

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

Copy after login

In JS, we usually use the document.getElementById() function to obtain web page elements. This function will obtain the corresponding HTML element based on the value of the id attribute and return the object of the element. For example:

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

Copy after login

The above code can obtain a button element with the id "btn" and then assign it to the variable btn. Next, we can use JS to control the display/hide of the button.

2. Click the button to show/hide

1. Control the display/hide of the button

In JS, we can use CSS style display Properties to control the display or hiding of elements. When the value of the display attribute is none, the element will be hidden; when the value of the display attribute is block, the element will be hidden. will be displayed.

Therefore, we only need to create a button and bind its click event. In the click event, set the display attribute of the controlled element to none or block can display/hide the element.

The following is a simple implementation method:

<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>

Copy after login

In the above code, we created a button and bound the function in its onclick event toggle(), this function is used to control the elements that need to be shown/hidden. In this function, we obtain the element id="content" through the document.getElementById() function and assign it to the variable content. Next, we determine whether the display attribute value of the element is none, if so, set it to block; if not, set it is none.

2. Control the display/hide of multiple elements

The above method can only control the display/hide of a single element. If you need to control multiple elements, you need to make corresponding modifications. We can encapsulate the elements that need to be controlled in the same parent element, traverse in the onclick event of the parent element, and then control it through the element's style.display attribute Show/hide its child elements.

The following is an implementation method:

<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>

Copy after login

In the above code, we encapsulate the three elements that need to be controlled in the parent element of id="wrapper". When the click event is triggered, the toggle() function will first obtain the parent element object wrapper, and then obtain all # through the wrapper.getElementsByClassName() method. ##class="content" element and store it in the array contents. Next, we use for to loop through all the elements in the array, and determine whether the value of its display attribute is none, and then set it to block or none.

3. Summary

This article introduces a basic JS operation: click a button to show/hide element content. Through the introduction of some of the syntax of JS and the demonstration of specific implementation methods, I believe that everyone can better master this skill. It should be noted that JS needs to be written with caution. Especially when referencing DOM objects, be sure to ensure that the object has been loaded to avoid unexpected errors.

The above is the detailed content of javascript button show hide. For more information, please follow other related articles on the PHP Chinese website!