Maison > interface Web > tutoriel CSS > Comment afficher et masquer un élément DIV en cliquant sur un bouton ?

Comment afficher et masquer un élément DIV en cliquant sur un bouton ?

Patricia Arquette
Libérer: 2024-12-18 01:20:10
original
1064 Les gens l'ont consulté

How to Show and Hide a DIV Element with a Button Click?

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

De nombreuses applications Web nécessitent la possibilité d'afficher ou de masquer des éléments sur la page, comme un div. Cela peut être facilement réalisé en utilisant JavaScript. Voici comment activer/désactiver la visibilité d'un div avec un bouton :

JavaScript pur :

Cette approche utilise la propriété style.display de l'élément div. Lorsque vous cliquez sur le bouton, un écouteur d'événement click est déclenché, qui vérifie si le div est actuellement visible (c'est-à-dire que style.display n'est pas « aucun »). Si tel est le cas, le div est masqué en définissant style.display sur « aucun ». Sinon, il est affiché en définissant style.display sur « block ».

var button = document.getElementById('button'); // Assumes element with>
Copier après la connexion

jQuery :

jQuery fournit une approche plus simple pour basculer la visibilité d'un élément. . La méthode toggle() bascule la visibilité de l'élément sélectionné. Lorsqu'on clique dessus, l'écouteur d'événement click déclenche la méthode toggle() sur le div avec l'ID 'newpost'.

$("#button").click(function() { 
    // assumes element with>
Copier après la connexion

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 de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal