Maison > interface Web > Questions et réponses frontales > Comment utiliser JavaScript pour masquer et afficher les divs

Comment utiliser JavaScript pour masquer et afficher les divs

PHPz
Libérer: 2023-04-21 14:54:20
original
3601 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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;
Copier après la connexion

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');
Copier après la connexion

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;
  }
});
Copier après la connexion

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>
Copier après la connexion

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;
});
Copier après la connexion

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;
}
Copier après la connexion

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>
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal