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

Masquer et afficher les éléments 'div' avec JavaScript

Considérons un scénario dans lequel vous souhaitez activer/désactiver la visibilité de deux éléments 'div' sur une page Web. Vous disposez de boutons qui déclenchent l'affichage et le masquage des éléments. Cependant, vous rencontrez un problème où seule la première fonction masque sa cible « div » mais pas la seconde.

Contrôle de la visibilité des éléments en JavaScript

Pour masquer ou afficher les éléments en JavaScript, vous pouvez manipuler leurs propriétés de style. Pour le contrôle de l'affichage, il existe deux options :

• Affichage : Définit la visibilité de l'élément.

  • 'aucun' : Masquer l'élément.
  • 'block' : affiche l'élément en tant que bloc autonome.
  • 'inline' : Affichez l'élément en ligne avec le texte environnant.
  • 'inline-block' : similaire à "inline" mais permet à l'élément d'avoir une largeur et une hauteur.

• Visibilité : Contrôle la visibilité de l'élément tout en conservant sa space.

  • 'hidden' : Masquer l'élément mais préserve son espace.
  • 'visible' : Afficher l'élément.

Masquer une collection d'éléments

Si vous souhaitez masquer plusieurs éléments à la fois, vous peut utiliser une fonction pour les parcourir et définir leur propriété d'affichage sur « aucun » :

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = 'none';
  }
}

Exemple d'utilisation :

hide(document.querySelectorAll('.target')); // Hides all elements with the 'target' class.
hide(document.querySelector('.target')); // Hides the first element with the 'target' class.
hide(document.getElementById('target')); // Hides the element with the ID 'target'.

En utilisant ces techniques, vous pouvez efficacement afficher ou masquer les éléments « div » et tout autre élément HTML sur votre page Web.

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!