How to use JavaScript to hide and display divs

In web development, we often need to implement the function of hiding and showing elements through JavaScript to improve the user interaction experience. One of the classic scenarios is to click a button to hide or show an element. The following will introduce how to use JavaScript to implement this function.

1. HTML structure

First, we need to create a button and a div to hide or show in HTML:

<button id="toggle-btn">点击切换</button>
<div id="toggle-div"></div>

2. CSS style

We can add CSS styles to buttons and divs to make them more beautiful and easy to operate:

<button id="toggle-btn" style="background-color: #fff; color: #333; border: 1px solid #333; padding: 5px 10px;">点击切换</button>
<div id="toggle-div" style="background-color: #f5f5f5; padding: 10px;">这是要隐藏或显示的div</div>

3. JavaScript code

Next, we need to use JavaScript code to hide and show div function. We can use event listeners to listen for button click events and use CSS styles to control the display and hiding of divs.

First, we need to define a variable to represent the state of the div. The initial state is displayed, defined as true:

let isShown = true;

Then, we can use the querySelector method to get the button and the button to be hidden or displayed. The DOM element of the div:

const toggleBtn = document.querySelector('#toggle-btn');
const toggleDiv = document.querySelector('#toggle-div');

Next, we need to bind the click event, that is, when the user clicks the button, perform the following operations:

toggleBtn.addEventListener('click', function() {
  if(isShown) {
    toggleDiv.style.display = 'none';
    isShown = false;
  } else {
    toggleDiv.style.display = 'block';
    isShown = true;
  }
});

In this code, we determine the div Whether the state is a displayed state, if so, it is set to a hidden state and the state variable is updated at the same time, and vice versa.

Complete code:

<button id="toggle-btn" style="background-color: #fff; color: #333; border: 1px solid #333; padding: 5px 10px;">点击切换</button>
<div id="toggle-div" style="background-color: #f5f5f5; padding: 10px;">这是要隐藏或显示的div</div>

<script>
  let isShown = true;
  const toggleBtn = document.querySelector('#toggle-btn');
  const toggleDiv = document.querySelector('#toggle-div');
  toggleBtn.addEventListener('click', function() {
    if(isShown) {
      toggleDiv.style.display = 'none';
      isShown = false;
    } else {
      toggleDiv.style.display = 'block';
      isShown = true;
    }
  });
</script>

4. Optimization

The above code can hide and display the div function, but there are some redundancies in the code and can be optimized.

First, we can use the toggle method to switch the display and hidden state of the div:

toggleBtn.addEventListener('click', function() {
  toggleDiv.style.display = isShown ? 'none' : 'block';
  isShown = !isShown;
});

Secondly, we can move the style definition to CSS to improve the maintainability of the code:

#toggle-btn {
  background-color: #fff;
  color: #333;
  border: 1px solid #333;
  padding: 5px 10px;
}

#toggle-div {
  background-color: #f5f5f5;
  padding: 10px;
}

Finally optimized complete code:

<button id="toggle-btn">点击切换</button>
<div id="toggle-div">这是要隐藏或显示的div</div>

<style>
  #toggle-btn {
    background-color: #fff;
    color: #333;
    border: 1px solid #333;
    padding: 5px 10px;
  }

  #toggle-div {
    background-color: #f5f5f5;
    padding: 10px;
  }
</style>

<script>
  let isShown = true;
  const toggleBtn = document.querySelector('#toggle-btn');
  const toggleDiv = document.querySelector('#toggle-div');
  toggleBtn.addEventListener('click', function() {
    toggleDiv.style.display = isShown ? 'none' : 'block';
    isShown = !isShown;
  });
</script>

5. Summary

Using JavaScript to hide and show elements is a very common scenario in web development. This function can be well implemented through event listeners, operating CSS styles and controlling element status to improve user interaction experience. Optimizing code can further improve the readability and maintainability of the code and improve development efficiency.

The above is the detailed content of How to use JavaScript to hide and display divs. For more information, please follow other related articles on the PHP Chinese website!