Comment utiliser JavaScript pour masquer et afficher les divs

Dans le développement Web, nous devons souvent implémenter la fonction de masquage et d'affichage d'éléments via JavaScript pour améliorer l'expérience d'interaction utilisateur. L'un des scénarios classiques consiste à cliquer sur un bouton pour masquer ou afficher un élément. Ce qui suit explique comment utiliser JavaScript pour implémenter cette fonction.

1. Structure HTML

Tout d'abord, nous devons créer un bouton et un div à masquer ou à afficher en HTML :

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

2. Style CSS

Nous pouvons ajouter des styles CSS au bouton et au div pour le rendre plus beau. Et facile à utiliser :

<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. Code JavaScript

Ensuite, nous devons utiliser du code JavaScript pour implémenter la fonction de masquage et d'affichage des div. Nous pouvons utiliser des écouteurs d'événements pour écouter les événements de clic sur un bouton et utiliser des styles CSS pour contrôler l'affichage et le masquage des div.

Tout d'abord, nous devons définir une variable pour représenter l'état du div. L'état initial est affiché, défini comme vrai :

let isShown = true;

Ensuite, nous pouvons utiliser la méthode querySelector pour obtenir le bouton et l'élément DOM du div. pour être masqué ou affiché :

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

Ensuite, nous devons lier l'événement click, c'est-à-dire que lorsque l'utilisateur clique sur le bouton, effectuer les opérations suivantes :

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

Dans ce code, nous déterminons si l'état du div est affiché, et si c'est le cas, définissez-le sur l'état caché lors de la mise à jour des variables d'état et vice versa.

Code complet :

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

Le code ci-dessus peut masquer et afficher les div, mais il y a quelques redondances dans le code et peut être optimisé.

Premièrement, nous pouvons utiliser la méthode toggle pour changer l'affichage et l'état caché du div :

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

Deuxièmement, nous pouvons déplacer la définition de style en CSS pour améliorer la maintenabilité du code :

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

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

Le code complet optimisé final :

<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. Résumé

L'utilisation de JavaScript pour masquer et afficher des éléments est un scénario très courant dans le développement Web. Cette fonction peut être bien implémentée via des écouteurs d'événements, en exploitant les styles CSS et en contrôlant l'état des éléments pour améliorer l'expérience d'interaction de l'utilisateur. L'optimisation du code peut encore améliorer la lisibilité et la maintenabilité du code et améliorer l'efficacité du développement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!