dom_9 隐藏和显示盒子

作者: basicGeek | 来源:发表于2018-11-22 16:05 被阅读0次

dom_9 隐藏和显示盒子
显示和隐藏盒子
magnifying-glass 放大镜
DOM操作练习(1)
js案例1-显示和隐藏盒子
案例：仿京东放大镜
js 放大镜效果
jQuery动画
jquery的各种DOM操作
jquery 效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        button {
            margin: 10px;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: #daa520;
        }
        .show {
            display: block;
        }
        .hide {
            display: none;
        }
    </style>

</head>
<body>
    <button id="btn">隐藏</button>
    <div>
        临千仞之溪，非才长也，位高也！
    </div>

    <script>
        //需求：点击button,隐藏盒子。改变文字，在点击按钮，显示出来。
        //步骤：
        //1.获取事件源和相关元素
        //2.绑定事件
        //3.书写事件驱动程序

        //1.获取事件源和相关元素
        var btn = document.getElementById("btn");
        var div = document.getElementsByTagName("div")[0];
        //2.绑定事件
        btn.onclick = function () {
            //3.书写事件驱动程序
            //判断btn的innerHTML属性值，如果为隐藏就隐藏盒子，并修改按钮内容为显示。
            //反之，则显示，并修改按钮内容为隐藏
            if(this.innerHTML === "隐藏"){
                div.className = "hide";
                //修改文字（innerHTML）
                btn.innerHTML = "显示";
            }else{
                div.className = "show";
                //修改文字（innerHTML）
                btn.innerHTML = "隐藏";
            }
        }

    </script>

</body>
</html>

show hide