这个div为什么不能消失呢？

Question

想要的效果是小于768时 点击按钮可以显示出div 然后让屏幕大于768时 让它div自动消失 之前没有clientWidth那句判断 不行 加上了那句判断也不行 这是为什么？之前实验只有一个div 让它大于768时就消失 试了一下这样可以 但是为什么加上js后就不能消失了呢 真的和js有关系吗？

   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style type="text/css">
   #div1{background-color:red;width: 100px;height: 100px;display: none;}
   @media(min-width:768px){
    #div1{display: none;}
   }
   </style>
   <script type="text/javascript">
     window.onload=function(){
      var oBtn1=document.getElementById('btn1');
      var oDiv1=document.getElementById('div1');
      oBtn1.onclick=function(){
        var dis=window.getComputedStyle(oDiv1).getPropertyValue("display");
        if(dis=="none"){
          if(document.body.clientWidth>768){
           oDiv1.style.display="none"; 
          }else{
            oDiv1.style.display="block";
          }
        }else{
          oDiv1.style.display="none";       
        }
      }
     }
   </script>
</head>
<button id="btn1">按钮</button>
<div id="div1"></div>
</body>

Answer 1

首先，我们得确定document.body.clientWidth返回的是啥，

console.log(typeof(document.body.clientWidth));//返回number
console.log(document.body.clientWidth);//返回数字

所以你的这句判断：document.body.clientWidth>"768px"是有问题的。
其次，你的需求是“让屏幕大于768时 让它div自动消失”，若自动消失的话，你应该直接把判断写在onresize事件里面，从你代码里看，是只有点击按钮后才去判断，与自动消失的需求不符。

window.onresize=function(){
  console.log(typeof(document.body.clientWidth));
  console.log(document.body.clientWidth);
  if(document.body.clientWidth>768){
     document.getElementById('div1').style.display="none";
  }
}

Answer 2

document.body.clientWidth返回的是一个number对象啊...
改成 document.body.clientWidth > 768

Answer 3

像这种情况，我觉得要么就都用js来改样式，js修改的display是加在行间的，优先级肯定高于页内样式，所以后来在通过media媒体查询修改的样式就不起效了，除非加！important