Comment JavaScript contrôle l'affichage et le masquage des éléments de la page

Dans la conception Web moderne, JavaScript est partout et ses fonctions sont également très puissantes. Parmi eux, contrôler l’affichage et le masquage des éléments de la page est une fonction que de nombreux développeurs doivent souvent utiliser. Cet article présentera comment JavaScript contrôle l'affichage et le masquage des éléments de page.

1. Afficher et masquer en modifiant l'attribut d'affichage de l'élément

Le moyen le plus simple de masquer et d'afficher des éléments de page consiste à modifier l'attribut d'affichage de l'élément. Cet attribut détermine la manière dont l'élément est affiché sur la page, par exemple en bloc, en ligne ou aucun. Ici, nous prenons comme exemple le bouton pour contrôler l'affichage et le masquage des éléments div. Le code est le suivant :

<button onclick="toggleDiv()">点击切换</button>
<div id="myDiv">这是一个 div 元素</div>
<script>
function toggleDiv() {
  var div = document.getElementById("myDiv");
  if (div.style.display === "none") {
    div.style.display = "block";
  } else {
    div.style.display = "none";
  }
}
</script>

Dans le code ci-dessus, nous appelons la fonction toggleDiv dans l'événement onclick du bouton. Cette fonction change l'affichage et le masquage de l'élément en récupérant l'élément myDiv et en modifiant son attribut d'affichage. Parmi eux, le jugement if est utilisé pour juger de l'état de l'élément actuel. S'il n'est défini sur aucun, il est défini sur aucun.

2. Afficher et masquer en ajoutant et en supprimant des classes CSS

Sur la base de la méthode ci-dessus, nous pouvons également afficher et masquer en ajoutant ou en supprimant des classes d'éléments CSS. L’avantage de cette approche est la possibilité de contrôler plusieurs éléments simultanément. Par exemple, nous pouvons définir une classe hide en CSS :

.hide {
  display: none;
}

puis utiliser cette classe dans les éléments de page :

<button onclick="toggleElements()">点击切换</button>
<div id="myDiv" class="hide">这是一个 div 元素</div>
<p id="myPara" class="hide">这是一个段落元素</p>
<script>
function toggleElements() {
  var elements = document.querySelectorAll(".hide");
  elements.forEach(function(element) {
    if (element.classList.contains("hide")) {
      element.classList.remove("hide");
    } else {
      element.classList.add("hide");
    }
  });
}
</script>

Dans le code ci-dessus, nous ajoutons la classe hide à l'élément qui doit être masqué, puis utilisons la classe hide. Fonction querySelectorAll pour obtenir la classe tous les éléments et traités en boucle. Dans la boucle, nous déterminons si l'élément contient la classe hide, et si c'est le cas, supprimons la classe hide, sinon ajoutons la classe hide. De cette façon, vous pouvez contrôler l’affichage et le masquage de plusieurs éléments.

3. Afficher et masquer en modifiant l'attribut de visibilité de l'élément

Une autre méthode couramment utilisée pour contrôler l'affichage et le masquage des éléments consiste à modifier l'attribut de visibilité de l'élément. Semblable à l'attribut d'affichage, l'attribut de visibilité détermine si l'élément est visible sur la page. Les valeurs facultatives sont visibles ou masquées. Voici un exemple de code utilisant cette méthode :

<button onclick="toggleDiv()">点击切换</button>
<div id="myDiv">这是一个 div 元素</div>
<script>
function toggleDiv() {
  var div = document.getElementById("myDiv");
  if (div.style.visibility === "hidden") {
    div.style.visibility = "visible";
  } else {
    div.style.visibility = "hidden";
  }
}
</script>

Dans le code ci-dessus, nous parvenons à afficher et masquer en récupérant l'élément myDiv et en modifiant son attribut de visibilité. Différent de l'attribut d'affichage, l'attribut de visibilité masque l'élément tout en occupant de l'espace sur la page, donc si vous avez besoin d'occuper de l'espace, vous pouvez utiliser cette méthode pour contrôler l'affichage et le masquage de l'élément.

Conclusion

Grâce aux trois méthodes ci-dessus, nous pouvons facilement contrôler l'affichage et le masquage des éléments de la page. Les développeurs peuvent choisir une méthode de contrôle qui leur convient en fonction de leurs besoins réels pour obtenir la meilleure expérience utilisateur et les meilleurs effets de page.

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!