• 技术文章 >web前端 >js教程

    javascript怎么实现按钮隐藏div

    藏色散人藏色散人2021-07-17 11:43:58原创417

    javascript实现按钮隐藏div的方法:首先创建一个前台示例文件;然后根据id按钮获取点击事件;最后添加事件处理函数即可。

    本文操作环境:windows7系统、javascript1.8.5&&html5版,DELL G3电脑

    JavaScript点击按钮隐藏和显示div方法

    根据id 按钮获取点击事件,添加事件处理函数
    效果:
    在这里插入图片描述
    在这里插入图片描述

    <style>
    		#dv{
    			width: 100px;
    			height: 100px;
    			background-color: royalblue;
    		}
    	</style>
    	<body>
    		<input type="button" value="隐藏" id="btn"/>
    		<!--<input type="button" value="显示" id="btn1"/>-->
    		<p id="dv"></p>
    		<script>
    			function my(id){
    				return document.getElementById(id);
    			}
    			//第一种方法
    			/*my("btn").onclick=function(){
    				my("dv").style.display="none";
    			}
    			my("btn1").onclick=function(){
    				my("dv").style.display="block";
    			}*/
    			//第二种方法
    			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>
    	</body>

    推荐学习:《javascript高级教程

    以上就是javascript怎么实现按钮隐藏div的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript div
    上一篇:关于electron-vue图片压缩 下一篇:聊聊Node.js中JSON格式和Excel格式的双向转换
    VIP会员

    相关文章推荐

    • JavaScript求x平方怎么做• JavaScript中DOM常用的方法有哪些• javascript怎么跳出循环• JavaScript作用域分为哪两类

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网