Javascript 调整窗口大小时，如何添加/删除类？

我想知道当窗口缩小到一定大小时，如何更改图像的属性，但总是出现错误。有人有什么建议吗

这是我的代码：

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

var img=document.querySelectorAll（“img”）；
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<800）{
img.classList.add（“中心”）；
img.classList.remove（“img”）
}
否则{
img.classList.remove（“中心”）；
img.classList.add（“img”）
}
});

您似乎混合了普通JavaScript和JQuery。如果您有可用的JQuery，您还可以使用它来设置图像类，例如：

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

var img=$（'img'）；
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<800）{
img.addClass（“中心”）.removeClass（“img”）；
}否则{
img.removeClass（“中心”）.addClass（“img”）；
}
});

---

否则，您将需要遍历img集合并添加/删除单个类。

在代码示例中，

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

var-imgs=document.querySelectorAll（“img”）；
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<800）{
对于（var i=0；i，这里有一个仅使用CSS的解决方案

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

如果窗口大小小于800px，它会将您想要的样式应用于图像。
会出现什么错误？请记住，
querySelectorAll（）
返回一个集合，而不仅仅是一个结果。此外，这是一个你只能用CSS和媒体查询来解决的问题。我很确定你也可以用js来解决。但是媒体查询可以更有效地完成这项工作。最好是链接像
$（'img'）.addClass（）.removeClass（）这样的方法，以便
$（'img'））
选择不会每次执行两次。或者更好的是，使用类似于OP代码的
var img=$（'img'）
缓存它，这样它就不必在每次调整大小时重新选择。是的，合并到答案中。
@media (max-width:800px) {
    .img-class {
         ... center styling ...
    }
}