Удаление класса из всех изображений с помощью JavaScript без использования jQuery

1

Я не очень разбираюсь в jQuery, и мне нужно выполнить следующую задачу. Я хочу удалить класс из всех изображений на веб-странице без использования jQuery. Я смог найти это исправлено с помощью JQuery, но мне нужно, чтобы это было исправлено с помощью JavaScript. Я буду признателен, если кто-нибудь сможет мне помочь в этом. Спасибо!

Теги:

3 ответа

3
Лучший ответ

Попробуйте использовать эту функцию

/**
 * Removes all class attributes from all the images, if a class has been passed then it only removes that className
 * @param {string} [className=] optional parameter, only images with that className will be affected and will only lose that className
 * @returns {void}
 */
function removeImageClasses(className) {
    var validClass = typeof className === "string";
    var selector = validClass? "." + className : "";
    var list = document.querySelectorAll("img" + selector);
    for(var index = 0; index < list.length; index++) {
        if(validClass) list[index].classList.remove(className);
        else list[index].removeAttribute("class");
    }
}

Это рабочая демонстрация

(function() {

  var original = '<img class="blue"><img class="blue"><img class="green"><img class=""><img class/>';
  var images = document.getElementById("image-list");

  function removeImageClasses(className) {
    var validClass = typeof className == "string";
    var selector = validClass ? "." + className : "";
    var list = document.querySelectorAll("img" + selector);
    for (var index = 0; index < list.length; index++) {
      if (validClass) list[index].classList.remove(className);
      else list[index].removeAttribute("class");
    }
  }

  function reset() {
    images.innerHTML = original;
  }

  function onClick(id, callBack) {
    document.getElementById(id).addEventListener("click", callBack);
  }

  onClick("remove-blue", function() {removeImageClasses("blue")});
  onClick("remove-green", function() {removeImageClasses("green")});
  onClick("remove-yellow", function() {removeImageClasses("yellow")});
  onClick("remove-all", removeImageClasses);
  onClick("reset", reset);
})();
#image-list {
  margin-top: 10px;
}

img {
  background-color: transparent;
  display: block;
  float: left;
  height: 50px;
  width: 50px;
}

img.blue {
  background-color: blue;
}

img.green {
  background-color: green;
}
<button id="remove-blue">Remove Blue</button>
<button id="remove-green">Remove Green</button>
<button id="remove-yellow">Remove Yellow</button>
<button id="remove-all">Remove All</button>
<button id="reset">Reset</button>
<div id="image-list">
  <img class="blue" />
  <img class="blue" />
  <img class="green" />
  <img class="" />
  <img class/>
</div>
Поделиться
  • 0
    @bilalawan Я установил рабочую демоверсию, если вы хотите ее протестировать
3

Простой современный способ:

[].forEach.call(document.images, x=>x.removeAttribute("class"));

другой гладкий новый способ:

for(let img of document.images) img.className="";

более старый безопасный способ:

for(var я in document.images) if(i-.1)document.images[i].className = "";

другой более старый способ, лучше первого (спасибо @mplungjan):

for(var d=document.images, i=d.length-1;i;i--) d[i].removeAttribute("class");

Поделиться
  • 0
    @Jonasw - неясно, хочет ли OP удалить свойство класса или класс из него
  • 0
    @ dandavis похоже, что слишком много людей редактировали это без участия ...
Показать ещё 9 комментариев
0

Это должно выполнить задачу.

for(var i = 0, len = document.images.length; i < len; i++)
    document.images[i].className = "";
})
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню