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");
   }
}