19点击一个按钮，设置div的隐藏

方法一、通过判断当前点击的按钮的value属性

<style type="text/css">
            div {
                width: 200px;
                height: 200px;
                background-color: #008000;
                border: 3px solid #9895F7;
            }
        </style>

 

<input type="button" value="隐藏" id="btn22" />
        <div id="clss"></div>
        <script type="text/javascript">
            function my$(id) {
                return document.getElementById(id);
            }
            //根据id获取按钮,注册点击事件,添加事件处理函数
            my$("btn22").onclick = function() {
                //判断当前点击的按钮的value属性值
                if (this.value == "隐藏") {
                    my$("clss").style.display = "none"; //隐藏
                    this.value = "显示";
                } else if (this.value == "显示") {
                    my$("clss").style.display = "block"; //显示
                    this.value = "隐藏";
                }
            };
        </script>

 

方法二、通过类样式的方式设置div的显示和隐藏

<style type="text/css">
            div {
                width: 200px;
                height: 200px;
                border: 3px solid #008000;
                background-color: #9ACD32;
            }

            .cls {
                display: none;
            }
        </style>

<input type="button" value="隐藏" id="btn" />
        <div id="dv"></div>
        <script type="text/javascript">
            function my$(id) {
                return document.getElementById(id);
            }

            //点击按钮,通过类样式的方式设置div的显示和隐藏
            my$("btn").onclick = function() {
                //判断的是div是否应用了类样式
                if (my$("dv").className != "cls") {
                    //现在是显示的,应该隐藏
                    my$("dv").className = "cls";
                    this.value = "显示";
                } else {
                    //隐藏的状态----立刻显示
                    my$("dv").className = "";
                    this.value = "隐藏";
                }
            };
        </script>

 

转载于:https://www.cnblogs.com/zhangDY/p/11424116.html