Blog GitHub

CSS классы

Ну, вроде с CSS разобрались, хотя нет — стоит ещё описать манипуляции с классами, тоже из разряда первичных навыков:

addClass(className)

добавление класса элементу

addClass(function(index, currentClass){
  return className
})

добавление класса с помощью функции обратного вызова

hasClass(className)

проверка на причастность к определённому классу

removeClass(className)

удаление класса

removeClass(function(index, currentClass){
  return className
})

удаление класса с помощью функции обратного вызова

toggleClass(className)

переключение класса

toggleClass(className, state)

переключение класса по флагу state

toggleClass(function(index, currentClass, state) {
  return className
}, state)

переключение класса с помощью функции обратного вызова, флаг state опционален

В приведённых методах в качестве className может быть строка, содержащая список классов через пробел.

Мне ни разу не приходилось использовать данные методы с функциями обратного вызова, и лишь единожды пригодился флаг «state», так что не заморачивайтесь всё это запоминать, да и в дальнейшем, цитируя руководство по jQuery, я буду сознательно опускать некоторые «возможности».

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

В первую очередь — добавление классов:

// добавляем класс «active»
$("#my").addClass("active")

// добавляем несколько классов за раз
$("#my").addClass("active notice")

Переключение классов так же востребованный метод:

// переключаем класс «active»:
//  - удаляем класс, если он есть
//  - добавляем, если его нет
$("#my").toggleClass("active")

// переключаем несколько классов
$("#my").toggleClass("active notice")

Работает переключение нескольких классов следующим образом:

<div id="my" class="active notice"> → <div id="my" class="">

<div id="my" class="active"> → <div id="my" class="notice">

<div id="my" class=""> → <div id="my" class="active notice">

Ну и примеры с удалением, для полного комплекта, так сказать:

// удаляем класс «active»
$("#my").removeClass("active") 

// удаляем несколько классов за раз
$("#my").removeClass("active notice")

Наглядный интерактивный пример:

PreviousCSS стилиNextАтрибуты

Last updated