Maison >interface Web >js tutoriel >Comment puis-je afficher et masquer les DIV à l'aide de JavaScript ?

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

Linda Hamilton
Linda Hamiltonoriginal
2024-12-02 16:22:15827parcourir

How Can I Show and Hide DIVs Using 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!

Déclaration:
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