Совет: добавьте или удалите класс CSS с помощью Vanilla JavaScript

Как работает наша функция addClass

Наша функция addClass Наша цель — пройтись по каждому элементу HTML, убедиться, что класс еще не существует, и затем добавить класс.

Во-первых, если список элементов пуст, нашей функции больше нечего делать, поэтому мы можем выйти рано.

 // if there are no elements, we're done
if (!elements) { return; }

Далее, если мы решили идентифицировать наши HTML-элементы с помощью селектора, такого как #iddiv.classdivquerySelectorAll()

 // if we have a selector, get the chosen elements
if (typeof(elements) === 'string') {
  elements = document.querySelectorAll(elements);
}

Однако, если элементы DOM вводятся в функцию напрямую, мы можем их просматривать. Если есть один элемент DOM (а не список), мы сделаем его массивом, чтобы мы могли использовать тот же цикл и упростить наш код. Мы можем сказать, есть ли только один элемент, потому что элемент имеет свойство tagName , а список — нет.

 // if we have a single DOM element, make it an array to simplify behavior
else if (elements.tagName) { elements=[elements]; }

Теперь, когда у нас есть элементы в формате, который мы можем зациклить, мы пройдемся по каждому из них, проверим, существует ли уже класс, и, если нет, добавим класс.

 // add class to all chosen elements
for (var i=0; i<elements.length; i++) {

  // if class is not already found
  if ( (' '+elements[i].className+' ').indexOf(' '+myClass+' ') < 0 ) {

    // add class
    elements[i].className += ' ' + myClass;
  }
}

Обратите внимание, что мы добавляем пробел в начале и конце, чтобы упростить шаблон, который мы ищем, и избежать необходимости в регулярном выражении.

В любом случае, мы закончили — теперь вы можете добавить класс!

Удалить класс

Чтобы удалить класс, мы можем использовать следующую функцию:

 function removeClass(elements, myClass) {

  // if there are no elements, we're done
  if (!elements) { return; }

  // if we have a selector, get the chosen elements
  if (typeof(elements) === 'string') {
    elements = document.querySelectorAll(elements);
  }

  // if we have a single DOM element, make it an array to simplify behavior
  else if (elements.tagName) { elements=[elements]; }

  // create pattern to find class name
  var reg = new RegExp('(^| )'+myClass+'($| )','g');

  // remove class from all chosen elements
  for (var i=0; i<elements.length; i++) {
    elements[i].className = elements[i].className.replace(reg,' ');
  }
}

Большая часть этой функции removeClassaddClass собирая нужные элементы HTML и просматривая их. Единственная разница — это часть, где класс удаляется.

Вот удаление класса более подробно:

 // create pattern to find class name
var reg = new RegExp('(^| )'+myClass+'($| )','g');

// remove class from all chosen elements
for (var i=0; i<elements.length; i++) {
  elements[i].className = elements[i].className.replace(reg,' ');
}

Сначала мы создаем регулярное выражение для поиска всех экземпляров нашего желаемого класса. Выражение '(^| )'+myClass+'($| )'myClass 'g'

Используя наш шаблон, мы заменяем имя класса пробелом. Таким образом, имена классов в середине списка останутся разделенными, и не будет никакого вреда, если удаленный класс находится на концах.

Модификация классов современным способом

Браузеры из IE10 и выше поддерживают свойство под названием classList , которое значительно облегчает работу с классами элемента.

В предыдущей статье Крейг Баклер предоставил список того, что может сделать classList

Доступны следующие свойства:

длина — количество примененных имен классов
item (index) — имя класса по определенному индексу
Содержит класс
add (class) — применяет новый класс к узлу
удалить (класс) — удаляет класс из узла
toggle (class) — удаляет или добавляет класс, если он применяется или не применяется соответственно

Мы можем использовать это в предпочтении к свойству clunkier className:

 document.getElementById("myelement").classList.add("myclass");

Давайте использовать эту информацию для создания функций, которые добавляют и удаляют классы из всех элементов, которые соответствуют селектору.

Эти функции будут получать все нужные элементы, проходить через них и добавлять или удалять классы для каждого из них.

Добавить класс

 function addClass(selector, myClass) {

  // get all elements that match our selector
  elements = document.querySelectorAll(selector);

  // add class to all chosen elements
  for (var i=0; i<elements.length; i++) {
    elements[i].classList.add(myClass);
  }
}

// usage examples:
addClass('.class-selector', 'example-class');
addClass('#id-selector', 'example-class');

Удалить класс

 function removeClass(selector, myClass) {

  // get all elements that match our selector
  elements = document.querySelectorAll(selector);

  // remove class from all chosen elements
  for (var i=0; i<elements.length; i++) {
    elements[i].classList.remove(myClass);
  }
}

// usage examples:
removeClass('.class-selector', 'example-class');
removeClass('#id-selector', 'example-class');

Вывод

Мы рассмотрели, как добавлять и удалять классы через classNameclassList

Когда вы можете управлять классами CSS с помощью JavaScript, вы разблокируете множество функций, включая обновления отображения контента, анимацию, сообщения об ошибках, диалоговые окна, меню и многое другое.

Я надеюсь, что эта статья была полезна, и если у вас есть какие-либо вопросы или мысли, пожалуйста, не стесняйтесь поделиться ими в комментариях.