html afficher masquer

Introduction à la technologie HTML d'affichage/masquage

Dans le développement Web, afficher et masquer des éléments de page est une exigence courante. Par exemple, lors du changement de contenu sur la page, les images correspondantes doivent être affichées et masquées en conséquence. Afin de résoudre ce problème, les développeurs doivent maîtriser la technologie d’affichage et de masquage, qui est une technologie importante pour rendre le site Web plus convivial et plus flexible.

Il existe de nombreuses façons d'afficher/masquer un élément. Cet article présentera les quatre méthodes suivantes :

1. Utiliser JavaScript
   En écrivant du code JavaScript et en l'intégrant dans une page HTML, vous pouvez obtenir l'effet d'afficher et de masquer un élément. élément. La méthode spécifique est la suivante :

Tout d'abord, vous devez créer un élément dans la page HTML, tel que l'extrait de code suivant :

<div id="myDiv">这是一个div元素</div>

Ensuite, lorsque vous utilisez JavaScript, vous pouvez modifier l'attribut s de l'élément en manipulant le DOM HTML (par exemple, modifiez Son style est défini sur "display:none;" ou "display:block;") pour l'afficher ou le masquer.

Ce qui suit est une simple fonction JavaScript qui inverse l'état d'affichage d'un élément :

function toggleDivVisibility() {
  var myDiv = document.getElementById("myDiv");
  if (myDiv.style.display === "none") {
    myDiv.style.display = "block";
  } else {
    myDiv.style.display ="none";
  }
}

La fonction obtient d'abord un élément via la méthode getElementById(), puis l'affiche ou le masque en définissant son style.

2. Utiliser CSS
   Il existe une propriété "visibilité" en CSS, qui peut contrôler la visibilité des éléments. Contrairement à la méthode ci-dessus, lors de l'utilisation de la méthode CSS, deux classes différentes doivent être définies en HTML pour représenter respectivement les états d'affichage et masqué. Par exemple :

.hide {
  visibility: hidden;
}
.show {
  visibility: visible;
}

Ensuite, dans la page HTML, vous devez spécifier la classe d'un élément pour contrôler son état d'affichage, par exemple :

<div id="myDiv" class="hide">我要被隐藏</div>

Maintenant, nous n'avons plus besoin d'utiliser JavaScript, il nous suffit de changer l'affichage de l'élément en modifiant l'état de la classe CSS. La méthode d'implémentation spécifique est la suivante : la méthode

document.getElementById("myDiv").classList.toggle("hide");
document.getElementById("myDiv").classList.toggle("show");

classList.toggle() est très pratique et peut être affichée ou masquée en changeant le nom de la classe.

3. Utiliser jQuery
   jQuery est une bibliothèque JavaScript populaire qui peut facilement obtenir des effets de manipulation DOM. Pour utiliser jQuery pour contrôler la visibilité des éléments, vous devez d'abord introduire la bibliothèque jQuery dans la page HTML. Par exemple :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Ensuite, nous pouvons utiliser le code suivant pour afficher et masquer des éléments :

$("#myDiv").toggle();

Cette fonction déterminera automatiquement l'état actuel de l'élément et changera son affichage ou son masquage.

4. Utilisation de Frameworks
   Un framework est un ensemble de bibliothèques et d'outils permettant de développer des applications Web. Surtout dans les applications monopage, la possibilité d'afficher/masquer des éléments est déjà implémentée dans le framework sans avoir à écrire de code vous-même. Les frameworks courants incluent Angular, React, Vue, etc.

Par exemple, dans React, un développeur peut créer un composant contenant un bouton. Lorsque vous cliquez sur le bouton, le composant effectue un nouveau rendu pour afficher/masquer l'élément spécifié.

Ce qui suit est un exemple de code pour un composant React :

import React, {useState} from 'react';

function ShowHide() {
  const [show, setShow] = useState(false);

  return (
    <>
      <button onClick={() => setShow(!show)}>切换显示/隐藏</button>
      {show && <div>这是显示的元素。</div>}
    </>
  );
}

Notez que la fonction useState() est l'une des fonctions hook utilisées pour déclarer l'état dans React. En cliquant sur le bouton, il bascule l'état de la variable show et restitue le composant, dans le code ci-dessus, faisant afficher ou masquer l'élément spécifié.

Conclusion

Quelle que soit la méthode que vous choisissez, vous devez implémenter la fonction d'affichage/masquage d'un élément lors du développement de pages Web. La maîtrise de cette technologie peut rendre le site Web plus convivial et plus flexible, le rendant plus facile à utiliser et à adapter à différents scénarios.

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!