Question

我正在创建一个脚本，当div因为调整大小而大于正常时会更改div的样式。

我想出了这个，但由于某种原因，有时它说宽度为0，我无法弄明白为什么。此外，当我更改div必须更改的时间时，它不会起作用，也不会改变。

＆＃13;

window.addEventListener('resize', height);

function height() {
  var height = document.getElementById('noline').offsetHeight;
  document.getElementById("noline").innerHTML = height;

  if (height <= 20) {
    document.getElementById('noline').setAttribute('id', 'line1');

  } else {
    document.getElementById('line1').setAttribute('id', 'noline');
  }
}

＆＃13;

#noline
{
border: solid 5px blue;
}

#line1
{
border: solid 5px black;
}

＆＃13;

<div id="noline">
</div>

＆＃13;

我检查了stackoverflow，但无法找到一个容易理解的答案，因为我是javascript的新手，我不确定我做错了什么，所以我想知道我做错了什么，如何修复它以及为什么它会发生吗。

谢谢！

Answer 1

您可以在css文件中使用@media规则。

@media (max-width: 720px) {
    .something{
         .
         .
         .
    }
}

Answer 2

一个干净的解决方案是使用css媒体查询。您首先想知道要定位的浏览器的维度。然后做这样的事情

@media (max-width: 600px) {
  .div1 {

  }
}


 @media (max-width: 720px) {
      .div2 {

      }
    }

浏览器调整大小时如何更改div样式

2 个答案: