Метод addClass

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

Синтаксис

Един CSS клас:

javascript$(селектор).addClass(име на CSS клас);

Няколко CSS класа (като низ):

javascript$(селектор).addClass('клас1 клас2 клас3 ...');

Няколко CSS класа (като масив):

javascript$(селектор).addClass(['клас1', 'клас2', 'клас3', '...']);

Прилагане на функция към всеки елемент в набора:

javascript$(селектор).addClass(function(номер в набора, текущи CSS класове на елемента));

Пример

Нашият параграф няма никакви класове. Нека добавим клас www към него:

html<p id="test">text</p>
javascript$('#test').addClass('www');

HTML кодът ще изглежда така:

html<p id="test" class="www">text</p>

Пример

Нашият параграф вече има клас. Нека добавим още и клас www към него:

html<p id="test" class="eee">text</p>
javascript$('#test').addClass('www');

HTML кодът ще изглежда така:

html<p id="test" class="eee www">text</p>

Пример

Нашият параграф вече има два класа. Нека добавим още и клас www към него:

html<p id="test" class="eee ggg">text</p>
javascript$('#test').addClass('www');

HTML кодът ще изглежда така:

html<p id="test" class="eee ggg www">text</p>

Пример

Нашият параграф вече има клас. Нека добавим още два класа - www и ggg:

html<p id="test" class="eee">text</p>
javascript$('#test').addClass('www ggg');

HTML кодът ще изглежда така:

html<p id="test" class="eee www ggg">text</p>

Вижте също

  • методи removeClass, toggleClass, hasClass
  • JavaScript свойство classlist,
    с което можете да добавяте и премахвате CSS класове на елемент на чист JavaScript