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

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

Lors de la création d'un site Web, il est souvent souhaitable de basculer la visibilité des éléments. Ceci peut être réalisé en utilisant JavaScript. Cependant, si vous rencontrez des problèmes avec votre code, envisagez ces solutions potentielles :

Manipulation de la propriété 'display'

Pour afficher ou masquer un élément, définissez la propriété propriété de style 'display' à la valeur souhaitée :

// Hide an element
element.style.display = 'none';

// Show an element
element.style.display = 'block';

Manipulation de la 'visibilité' Propriété

Si vous souhaitez qu'un élément occupe toujours de l'espace lorsqu'il est masqué, ajustez plutôt la propriété « visibilité » :

// Hide an element
element.style.visibility = 'hidden';

// Show an element
element.style.visibility = 'visible';

Gestion des collections d'éléments

Pour masquer plusieurs éléments, itérez et définissez « l'affichage » de chaque élément sur 'none' :

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

Application du correctif à votre code

Dans votre code, la deuxième fonction ne fonctionne pas car elle tente de remplacer div2 par div1 contenu. Pour afficher div2, remplacez cette ligne dans la deuxième fonction :

document.getElementById('replace_target').innerHTML = document.getElementById('source').innerHTML;

par ceci :

document.getElementById('replace_target').innerHTML = document.getElementById('target').innerHTML;

En ajustant ces propriétés et en appliquant ces techniques, vous devriez maintenant pouvoir basculer le visibilité de vos divs comme souhaité.

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!