javascript怎么实现按钮隐藏div-木庄网络博客

本文摘自PHP中文网，作者藏色散人，侵删。

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>