Добавете и премахнете CSS класове с помощта на Javascript, Javascript

В тази статия ще представим два начина за манипулиране на HTML класа. Първият използва свойството Javascript classList, а вторият използва библиотеката jQuery. Първо, разгледайте следния код:

Той представя бутон със събитие onclick, което ви позволява да превключвате цвета на бутона. CSS кодът определя класове за задаване на цвета на фона:

Единственото нещо, което остава да направите тук, е да внедрите функцията toggleColor ():

Всеки елемент има свойство classList, което съдържа атрибути на клас стил HTML. Това свойство включва методи за добавяне или премахване на класове:

Горният пример използва три метода classList .

  • contains () - Връща true, ако елементът има родителски клас. Ако не, тогава се връща false;
  • add () - добавя посочения клас към елемента. Това действие се игнорира, ако елементът вече съдържа посочения клас;
  • Remove () - посоченият клас, ако има такъв, се премахва.