JavaScript：クラスを削除した後、 'サイズ変更'イベントにクラスを追加するにはどうすればよいですか？

Question

私はサイズ変更イベントを待ち受けるために、イベントリスナーをウィンドウに追加しています。基本的には、ブラウザの幅が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 (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"); 
    } 
}