Оглавление

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

Библиотека jQuery позволяет не только изменять определенные атрибуты стиля, но и управлять классами. Для этого предназначены следующие методы.
addClass(<Название класса>) — добавляет указанный класс всем элементам коллекции. В качестве параметра можно указать несколько названий классов через пробел.

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

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

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

 

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

<html>
<head>
<title>Методы addClass(), removeClass() и toggleClass()</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(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="clsl">Текст</div>


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

 

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити