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>
  • 相关阅读:
    java小学生四则运算带面板版 但我不知道为什么同类变量却进不了动作监听中去
    超实用 2 ArrayList链表之 员工工资管理系统
    超实用 1 ArrayList 链表
    我的JAVA运算符理解
    小学生四则运算
    一、二周冲刺总结
    阅读《构建之法》第8,9,10章
    第一次Sprint计划
    作业6
    5.2
  • 原文地址:https://www.cnblogs.com/zhangDY/p/11424116.html
Copyright © 2011-2022 走看看