Maison >interface Web >js tutoriel >Comment basculer la visibilité d'un élément DIV à l'aide d'un bouton ?

Comment basculer la visibilité d'un élément DIV à l'aide d'un bouton ?

Patricia Arquette
Patricia Arquetteoriginal
2024-10-31 06:24:30741parcourir

How to Toggle the Visibility of a DIV Element Using a Button?

Basculer la visibilité d'un élément DIV à l'aide d'un bouton

Question : Pouvez-vous m'aider à créer un bouton bascule qui contrôle la visibilité d'un élément DIV ?

Solution : Pour y parvenir, nous pouvons utiliser différentes approches en fonction du langage d'implémentation. Voici deux méthodes courantes :

JavaScript pur :

var button = document.getElementById('button'); // Assumes element with id='button'

button.onclick = function() {
    var div = document.getElementById('newpost');

    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }
};

jQuery :

$("#button").click(function() { 
    // assumes element with id='button'
    $("#newpost").toggle();
});

Ces solutions utilisent gestionnaires d'événements simples pour basculer la propriété « display » de l'élément DIV, le rendant masqué ou visible en fonction du clic sur le bouton de l'utilisateur.

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