JavaScript：如何在删除“调整大小”事件后添加一个类？

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> 

码笔

在这里阅读有关媒体查询的信息

Answer 2

您已经用if语句弄乱了循环。

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

应该：

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