Comment puis-je afficher et masquer les DIV à l'aide de JavaScript ?

Afficher/masquer 'div' à l'aide de JavaScript

Une tâche courante dans le développement Web consiste à afficher ou masquer dynamiquement des éléments sur la page. Cela peut être accompli en utilisant JavaScript pour manipuler les propriétés de style de l'élément.

Masquer un seul div

Pour masquer un seul div avec l'ID "my_div", utilisez ce qui suit code :

document.getElementById("my_div").style.display = "none";

Affichage d'un Div caché

Pour afficher un div caché avec l'ID "my_div", utilisez le code suivant :

document.getElementById("my_div").style.display = "block";

Basculer la visibilité

Pour basculer la visibilité d'un div avec l'ID "my_div" , utilisez le code suivant :

var div = document.getElementById("my_div");
if (div.style.display == "none") {
  div.style.display = "block";
} else {
  div.style.display = "none";
}

Utilisation de la visibilité Propriété

Alternativement, la propriété de visibilité peut être utilisée pour masquer des éléments sans affecter leur disposition. Pour masquer un div en utilisant la visibilité, utilisez le code suivant :

document.getElementById("my_div").style.visibility = "hidden";

Pour afficher un div masqué en utilisant la visibilité, utilisez le code suivant :

document.getElementById("my_div").style.visibility = "visible";

Masquer une collection de Éléments

Pour masquer plusieurs éléments, utilisez une boucle pour les parcourir et définir leur affichage ou leur visibilité sur "aucun":

var elements = document.querySelectorAll(".my_class");
for (var i = 0; i < elements.length; i++) {
  elements[i].style.display = "none";
}

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!