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的解决方案。

dict

如果窗口大小小于800px，则会将您想要的样式应用于图像。

Answer 2

在您的代码示例中，document.querySelectorAll是由classList返回的DOM元素的集合。您正尝试一次更改所有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 = $("img");

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

或者，既然您似乎在使用jQuery，请充分利用它：

classList

jQuery会自动将更改应用于每个元素。此外，如果你关心它，IE 9及以下版本不支持@media (max-width:800px) { .img-class { ... center styling ... } }。

Answer 3

你似乎在混合使用vanilla 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集合并添加/删除单个类。

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

3 个答案: