調整窗口大小時如何添加/刪除類？

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

這是僅CSS的解決方案。

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

如果窗口大小小於800px，它將對圖像應用所需的樣式。

Answer 2

在您的代碼示例中， img是由document.querySelectorAll返回的DOM元素的集合。 您試圖一次全部更改其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將自動將更改應用於每個元素。 另外，如果您擔心IE 9及更低版本，則不支持classList 。

Answer 3

您似乎在混合使用原始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集合並添加/刪除單個類。