zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    js三大弹出消息框
    HDU
    BZOJ 1101 Zap 莫比乌斯反演
    竞赛常用STL备忘录
    K-query SPOJ
    HDU 3333 Turing Tree 离线 线段树/树状数组 区间求和单点修改
    2018 Multi-University Training Contest
    多校补完计划 2017-02
    CodeForces 931C Laboratory Work 水题,构造
    CodeForces 937D 936B Sleepy Game 有向图判环,拆点,DFS
  • 原文地址:https://www.cnblogs.com/zhangDY/p/11424116.html
Copyright © 2011-2022 走看看