Question

我正在向窗口添加一个事件监听器来监听 resize 事件。基本上我想在浏览器的宽度低于768px时删除'center'类，然后在高于768px时将其添加回来。

 window.addEventListener('resize', function() {
    var width = 0,
        doc = document,
        div = doc.getElementsByTagName('div'), i;
    if (window.innerHeight) {
        width = window.innerWidth;
    } else if (doc.documentElement && doc.document.documentElement.clientHeight) {
        width = doc.documentElement.clientWidth;
    } else if (doc.body) {
        width = doc.body.clientWidth;
    }
    if (width < 768) {
        for (i = 0; i < div.length; i++) {
            div[i].classList.remove('center');
        }
    } else {
        div[i].classList.add('center');
    }
}, false);

它正确删除它但在检查控制台后，我立即收到此错误。不知道为什么它会从一开始就记录这个错误...

index.html:591 Uncaught TypeError: Cannot read property 'classList' of undefined(…)

感谢任何帮助！

Answer 1

您不需要js，仅限css：

.media {
    background-color: blue;
  }
@media (max-width: 600px) {
  .media {
    background-color: red;
  }
}

<div class="media"> Hello world</div>

codepen

请在此处阅读media queries

Answer 2

你用if语句弄乱了你的循环。

for (i = 0; i < div.length; i++) {
  if(width < 768)
       div[i].classList.remove("center");
   } else {
       div[i].classList.add("center");
   }
}

应该是：

eval()

JavaScript：删除后如何在'resize'事件上添加类？

2 个答案: