当 window 调整大小时，我如何 add/remove 类？

Question

我想弄清楚当 window 的大小缩小到一定大小时如何更改图像的属性，但它不断出现错误。有人有什么建议吗？

这是我的代码：

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 集合和 add/remove 个人类。

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 将自动将更改应用到每个元素。此外，IE 9 及以下版本不支持 classList，如果您关心这一点。

Answer 3

这里是一个只有 CSS 的解决方案。

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

如果 window 尺寸小于 800 像素，它会将您想要的样式应用于图像。

当 window 调整大小时，我如何 add/remove 类？

How can I add/remove classes when window is resized?

javascript

jquery

image

window-resize