Maison > interface Web > js tutoriel > Comment masquer div en cliquant sur le bouton en javascript

Comment masquer div en cliquant sur le bouton en javascript

青灯夜游
Libérer: 2021-10-09 12:09:35
original
7529 Les gens l'ont consulté

Méthode : 1. Utilisez l'instruction "button object.onclick=function(){}" pour lier la fonction de traitement des événements de clic au bouton ; 2. Dans la fonction de traitement, ajoutez le "div object.style.display=" none"" instruction; 3. Cliquer sur le bouton déclenchera la fonction de traitement et exécuter les instructions qu'il contient masquera le div.

Comment masquer div en cliquant sur le bouton en javascript

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

javascript implémente le fait de cliquer sur le bouton pour masquer le div

Obtenir l'événement click en fonction du bouton id, ajouter la fonction de gestionnaire d'événement

<input type="button" value="隐藏" id="btn"/>
<!--<input type="button" value="显示" id="btn1"/>-->
<div id="dv"></div>
<script>
	function my(id){
		return document.getElementById(id);
	}
	my("btn").onclick=function(){
			my("dv").style.display="none";
	}
</script>
Copier après la connexion

Rendu :

Comment masquer div en cliquant sur le bouton en javascript

C'est un peu plus compliqué, si le div est affiché, cliquez sur le bouton pour le masquer ; si le div Il est masqué et peut être affiché en cliquant sur le bouton.

<input type="button" value="隐藏" id="btn"/>
<!--<input type="button" value="显示" id="btn1"/>-->
<div id="dv"></div>
<script>
	function my(id){
		return document.getElementById(id);
	}
	my("btn").onclick=function(){
		if (this.value =="隐藏") {
			my("dv").style.display="none";
			this.value="显示";
		} else if(this.value =="显示"){
			my("dv").style.display="block";
			this.value="隐藏";
		}
	}
</script>
Copier après la connexion

Rendu :

Comment masquer div en cliquant sur le bouton en javascript

[Apprentissage recommandé : Tutoriel avancé javascript]

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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal