JavaScript: Как добавить класс в событие 'resize' после его удаления?

Question

Я добавляю слушателя событий в окно, чтобы прослушать размер событие. По сути, я бы хотел удалить класс 'center', когда ширина браузера падает ниже 768 пикселей, а затем добавляет его обратно, когда мы выше 768 пикселей.

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