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

Question

I am adding an event listener to the window to listen for the resize event. Essentially I'd like to remove the 'center' class when the width of the browser falls below 768px and then add it back when we are above 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);

It removes it correctly but upon checking the console, I immediately get this error. Not sure why it would log that error from the onset...

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

Appreciate any help!

Answer 1

You don't need js, css only:

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

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

codepen

read here about media queries

Answer 2

You've messed up your loop with your if statement.

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

should be:

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