Метод add на обекта classList

Методът add на обекта classList позволява добавяне на CSS класове към елемент.

Синтаксис

javascriptelement.classList.add(class);

Пример

Добавяме на елемента клас kkk:

html<p id="elem" class="www ggg zzz"></p>
javascriptlet elem = document.querySelector('#elem');
elem.classList.add('kkk');

Резултат от изпълнението на кода:

html<p id="elem" class="www ggg zzz kkk"></p>

Пример

Добавяме на елемента клас zzz, който вече присъства в елемента - нищо няма да се случи, тъй като дублиращите се класове не се добавят:

html<p id="elem" class="www ggg zzz"></p>
javascriptlet elem = document.querySelector('#elem');
elem.classList.add('zzz');

Резултат от изпълнението на кода:

html<p id="elem" class="www ggg zzz"></p>

Вижте също

  • метод classList.remove,
    който премахва зададен клас
  • метод classList.contains,
    който проверява зададен клас
  • метод classList.toggle,
    който превключва зададен клас