ウィンドウのサイズを変更したときにクラスを追加/削除するにはどうすればよいですか？

Question

私は、ウィンドウのサイズが特定のサイズに縮小されても、エラーの原因が継続している場合に、イメージの属性を変更する方法を考えています。誰でも助言がありますか？

これは私のコードです：

var img = document.querySelectorAll("img"); 

$(window).resize(function() { 
    if ($(window).width() < 800) { 
    img.classList.add("center"); 
    img.classList.remove("img") 
    } 
else { 
    img.classList.remove("center"); 
    img.classList.add("img") 
} 
}); 

Answer 1

あなたはバニラのJavaScriptとjQueryを混合しているようです。あなたはjQueryのは、利用可能な場合は、あなたにも例えば、画像のクラスを設定するためにそれを使用する場合があります。：

var img = $('img'); 
$(window).resize(function() { 
    if ($(window).width() < 800) { 
    img.addClass("center").removeClass("img"); 
    } else { 
    img.removeClass("center").addClass("img"); 
} 
}); 

そうしないと、あなたのimgコレクションを反復処理し、追加/個々のクラスを削除する必要があります。

Answer 2

コードサンプルでは、​​imgはDOM要素のコレクションで、document.querySelectorAllによって返されます。 classListを一斉に変更しようとしていますが、コレクションにはclassListというプロパティはありません。あなたは個別に、それぞれの要素のためにそれを実行する必要があります。

var imgs = document.querySelectorAll("img"); 

$(window).resize(function() { 
    if ($(window).width() < 800) { 
     for(var i=0; i<imgs.length; i++){ 
      imgs[i].classList.add("center"); 
      imgs[i].classList.remove("img"); 
     } 
    } 
    else { 
     for(var i=0; i<imgs.length; i++){ 
      imgs[i].classList.add("img"); 
      imgs[i].classList.remove("center"); 
     } 
    } 
}); 

それとも、あなたはjQueryのを使用しているように見えることから、それを活用する：

var imgs = $("img"); 

$(window).resize(function() { 
    if ($(window).width() < 800) { 
     imgs.addClass("center").removeClass('img'); 
    } 
    else { 
     imgs.addClass("img").removeClass('center'); 
    } 
}); 

のjQueryを自動的に各要素に変更を適用します。また、classListはIE 9以降ではサポートされていません。

Answer 3

ここには、CSSだけの解決策があります。

@media (max-width:800px) { 
    .img-class { 
     ... center styling ... 
    } 
} 

ウィンドウのサイズが800pxより小さい場合は、イメージに適用するスタイリングが適用されます。