Управление классами стилей

Библиотека jQuery позволяет не только изменять определенные атрибуты стиля, но и управлять классами. Для этого предназначены следующие методы.

  • addClass(<Название класса>) — добавляет указанный класс всем элементам коллекции. В качестве параметра можно указать несколько названий классов через пробел.
  • removeClass([<Название класса>]) — удаляет указанный класс у всех элементов коллекции. В качестве параметра можно указать несколько классов через пробел. Если название класса не указано, то будут удалены все классы.
  • toggleClass(<Название класса>[, <Условие>]) — добавляет указанный класс всем элементам коллекции, если он не был определен ранее, или удаляет указанный класс, если он был добавлен ранее. Если в необязательном параметре <Условие> задано значение true, то указанный класс будет добавлен, а если задано значение false, то указанный класс будет удален.

Все указанные методы в качестве значения возвращают коллекцию элементов jQuery. Рассмотрим возможность изменения класса при наведении курсора на элемент (листинг 5.2).

Листинг 5.2. Методы addClass(), removeClass() и toggleClass()

<!doctype html>
<html>
<head>
<title>Методы addClass(), removeClass() и toggleClass()</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $("#div1").hover(
      function() { // Если навести курсор
         $(this).removeClass().addClass("cls2");
      },
      function() { // Если убрать курсор
         $(this).removeClass().addClass("cls1");
      }
   );
   $("#div2").hover(
      function() { // Если навести курсор
         $(this).toggleClass("cls2");
      },
      function() { // Если убрать курсор
         $(this).toggleClass("cls2");
      }
   );
});
</script>
<style>
.cls1 { color:#000000; text-decoration:none; }
.cls2 { color:#ff0000; text-decoration:underline; }
</style>
</head>
<body>
<div id="div1" class="cls1">Наведите курсор на этот текст</div><br>
<div id="div2" class="cls1">Наведите курсор на этот текст</div>
</body>
</html>

В этом примере мы определили два класса cls1 и cls2. Класс cls1 описывает стиль элемента по умолчанию. Класс cls2 предназначен для описания стиля элемента при наведении курсора. После формирования структуры документа мы добавляем обработчики событий с помощью метода hover(). В первом параметре указывается функция, которая будет вызвана при наведении курсора. Во втором параметре указывается функция, которая будет вызвана, если курсор убрать с элемента. Внутри этих обработчиков текущий DOM-элемент доступен через указатель this. Если курсор будет наведен на первую надпись, то удаляем все классы, а затем добавляем класс cls2.

$(this).removeClass().addClass("cls2");

Если убрать курсор с элемента, то проделываем обратную операцию. Удаляем все классы и добавляем класс по умолчанию.

Вторая надпись демонстрирует применение метода toggleClass(). Если навести курсор, то метод проверит, был ли класс cls2 добавлен ранее. В случае отсутствия класса он будет добавлен, в противном случае удален. По этой причине во всех событиях мы указываем одну и ту же строку.

$(this).toggleClass("cls2");

Метод hasClass(<Название класса>) позволяет определить, был ли указанный класс добавлен ранее. Возвращает true, если класс был добавлен ранее.

function checkClass(cls) {
   if ($("#div1").hasClass(cls)) {
      alert("Определен");
   }
   else {
      alert("Нет");
   }
}
checkClass("cls2");               // Нет
$("#div1").addClass("cls2");
checkClass("cls2");               // Определен
checkClass("cls1");               // Определен
<div id="div1" class="cls1">Текст</div>

При первой проверке получим сообщение, что класс cls2 не определен. Далее добавляем класс и опять проверяем. В этом случае получим сообщение, что класс определен для элемента с идентификатором div1. Обратите внимание на тот факт, что добавление нового класса не удаляет другие классы, определенные ранее.

Самоучитель по jQuery
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

Поиск по сайту в Яндексе