Добавление класса

Материал из JQuery

Перейти к: навигация, поиск
.addClass()

Добавляет класс(ы) выбранным элементам страницы. Если из этих элементов некоторые уже принадлежат каким-то классам, то новый (новые) класс добавится к существующим, а не заменит их. Функция имеет два варианта использования:

.addClass("clName1 clName2 ..."):jQuery1.0
добавляет классы clName1, clName2, ... всем выбранным элементам.
.addClass(function(index, class)):jQuery1.4
добавляет классы, список которых возвращает заданная пользователем функция. Возвращаемое ей значение должно представлять из себя строку, с перечислением добавляемых классов через пробел. Функция вызывается отдельно для каждого из выбранных элементов. При вызове ей передаются следующие параметры: index — позиция элемента в наборе, class — текущий класс(ы) элемента.

Примеры использования:

$("#content").addClass("blackZone") добавит класс blackZone элементу с идентификатором content
$(".content").addClass("blackZone") добавит класс blackZone всем элементам с классом content (то есть, у этих элементов станет по меньшей мере два класса: class="content blackZone".

В действии

Добавим всем div-элементам на странице класс dotted, для добавления точечной красной рамки:

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    div{
      display: block;
      width: 50px;
      height: 50px;
      float: left;
      padding: 15px;
      margin: 5px;
      font-size: 20pt;
    }
    .green{background-color: #66ff66;}
    .gray{background-color: #aaa;}
    .dotted{border:2px dotted red}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div~gt~ 1 ~lt~/div~gt~
  ~lt~div class="gray"~gt~ 2 ~lt~/div~gt~
  ~lt~div class="green"~gt~ 3 ~lt~/div~gt~
~lt~script~gt~
    $("div").addClass("dotted");
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

См. также

Ссылки

Поисковые ключи:
  • добавить класс элементам страницы
  • добавление класса элементам
  • прибавить класс элементам
  • .addClass()
  • addClass()