点击按钮，执行一个函数，该函数控制div的显示与隐藏 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #oDiv{
            width:100px;
            height:300px;
            background: #ccc;
            display: none;
        }
    </style>
</head>
<body>
        <!-- 点击按钮，执行一个函数，该函数控制div的显示与隐藏，不用去获取按钮的id(getElementById) -->
    <input type="button" id = "btn"
    value = "点击" onclick = "showHide()">
    <div id = "oDiv"></div>
</body>
<script type="text/javascript">
    function showHide(){
        var oBtn = document.getElementById("btn");
        var oDiv = document.getElementById("oDiv");
        if(oDiv.style.display == "block"){
            oDiv.style.display = "none";
        //为什么这里的block要加引号，可以参考该处css中的display中的设置  css中display是key,value是block或者none，value是个字符串 那么肯定要加引号了。
        }else{
            oDiv.style.display = 'block';
        }
    }
</script>
</html>

 

posted on 2017-03-02 14:29  大娃二娃  阅读(1619)  评论(0)    收藏  举报

导航