JavaScript无法获取未声明属性 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js无法获取缺省值</title>
    <style>
        .div1{
            width: 200px;
            height: 330px;
            background-color: cyan;
        }
    </style>
    <script>
        
        window.onload = function(){
            var oBtn = document.getElementById('btn01');
            var oDiv = document.getElementById('div01');

            oBtn.onclick = function(){

                // if (oDiv.style.display == 'none'){
                if (oDiv.style.display == 'block' || oDiv.style.display == ''){
                    //  display == 'block' 这里不能直接设置为block.
                    // 因为display == block语句,首先需要去style语句里面寻找display属性,虽然默认有display属性, 但是如果没有声明语句,则仍然无法找到.
                    //所以, 要么判断none ,  要么使用||或判断''空字节.

                    oDiv.style.display = 'none';
                }
                else{
                    oDiv.style.display = 'block';
                }
            }
        }

    </script>
</head>
<body>
    <input type="button" name="" value="切换" id="btn01">
    <div class="div1" id="div01"></div>
</body>
</html>

 

posted @ 2019-08-13 17:23  Jrri  阅读(287)  评论(0)    收藏  举报