JS控制嵌入式CSS时添加了if条件无法运行的问题

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript">
  window.onload=function(){
    var btn=document.getElementById("btn");
    var div=document.getElementById("div");
    var btn2=document.getElementById("btn2");

     function addEvent(ele,type,hander){
        if (ele.addEventListener) {
          ele.addEventListener(type,hander,false);
        }else if(ele.attachEvent){
          ele.attachEvent(type,hander);
        }else{
          ele['on'+type]=hander;
        };
      }
    
    addEvent(btn,'click',showMsg)
    addEvent(btn2,'click',hideMsg)

    function showMsg(){
        if(div.style.display=="none"){
          div.style.display="block";
          }
    }
    function hideMsg(){
        if(div.style.display=="block"){
          div.style.display="none";
          }
    }
 }
    
  </script>
  <style type="text/css">
    #div{
      width:300px;
      height:300px;
      background-color:skyblue;
      display: none;
    }
  </style>
</head>
<body>
    <button id="btn">click</button>
    
    <div id="div"><button id="btn2">hide</button></div>
    
</body>
</html>

虽然这个if判断语句很多余吧，但突然发现了个问题

1.把display属性用内联样式直接放到div里的话，效果可以运行。

2.将hideMsg效果合并到showMsg里用else的话也可以运行。

但用嵌入式CSS的时候，1的情况无法运行，2的情况在浏览器显示则是点击一下变成内联，再点击一下才有效果。为什么？

MR158

浏览 2242回答 2

2回答

夫唯不争

随时随地看视频慕课网APP