Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Управление классами стилей
Библиотека jQuery позволяет не только изменять определенные атрибуты стиля, но и управлять классами. Для этого предназначены следующие методы:
addClass(<Название класса>)
— добавляет указанный класс всем элементам коллекции. В качестве параметра можно указать несколько названий классов через пробел. В листинге 1.6 мы добавляли стилевой классis-invalid
следующим образом:
$('#txtWidth').addClass('is-invalid');
В качестве параметра можно указать ссылку на функцию следующего формата:
function <Название функции>([<Индекс>[, <Значение>]]) {
// ...
}
Текущий элемент доступен внутри функции через указатель this
. Обратите внимание: указатель this
ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Текущий индекс элемента в коллекции доступен через параметр <Индекс>
, а стилевые классы — через параметр <Значение>
. Чтобы задать значение, необходимо внутри функции обратного вызова вернуть название добавляемого стилевого класса или названия нескольких классов через пробел. Пример добавления двух классов:
<div id="div1" class="p-2 m-2 border">Текст</div>
$('#div1').addClass( function(i, v) {
console.log(v); // p-2 m-2 border
return 'bg-info text-white';
});
removeClass([<Название класса>])
— удаляет указанный класс у всех элементов коллекции. В качестве параметра можно указать несколько классов через пробел. Если название класса не указано, то будут удалены все классы. В листинге 1.6 мы удаляли стилевой классis-invalid
при получении полем фокуса ввода:
$('#txtWidth, #txtHeight').focus( function() {
$(this).removeClass('is-invalid');
});
В качестве параметра можно указать ссылку на функцию следующего формата:
function <Название функции>([<Индекс>[, <Значение>]]) {
// ...
}
Текущий элемент доступен внутри функции через указатель this
. Обратите внимание: указатель this
ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Текущий индекс элемента в коллекции доступен через параметр <Индекс>
, а стилевые классы — через параметр <Значение>
. Чтобы удалить класс, необходимо внутри функции обратного вызова вернуть название стилевого класса или названия нескольких классов через пробел. Пример удаления двух классов:
<div id="div1" class="p-2 border bg-info text-white">Текст</div>
$('#div1').removeClass( function(i, v) {
console.log(v); // p-2 border bg-info text-white
return 'bg-info text-white';
});
toggleClass(<Название класса или функция>[, <Условие>])
— добавляет указанный класс всем элементам коллекции, если он не был определен ранее, или удаляет указанный класс, если он был добавлен ранее. В качестве первого параметра можно указать несколько классов через пробел. Удалим стилевой классborder
и добавим классbg-info
:
<div id="div1" class="p-2 border text-white">Текст</div>
$('#div1').toggleClass('border bg-info');
Если в необязательном параметре <Условие>
задано значение true
, то указанный класс будет добавлен, а если задано значение false
, то указанный класс будет удален:
$('#div1').toggleClass('border', false)
.toggleClass('bg-info', true);
В качестве первого параметра можно указать ссылку на функцию следующего формата:
function <Название функции>([<Индекс>[, <Значение>[,
<Статус>]]]) {
// ...
}
Текущий элемент доступен внутри функции через указатель this
. Обратите внимание: указатель this
ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Текущий индекс элемента в коллекции доступен через параметр <Индекс>
, а стилевые классы — через параметр <Значение>
. Если параметр <Статус>
имеет значение true
, то класс будет добавлен, если значение false
— то класс будет удален, а если значение undefined
— то выполняется переключение классов. Внутри функции обратного вызова нужно вернуть название стилевого класса или названия нескольких классов через пробел. Пример удаления двух классов:
<div id="div1" class="p-2 border bg-info text-white">Текст</div>
$('#div1').toggleClass( function(i, v, status) {
console.log(v); // p-2 border bg-info text-white
console.log(status); // false
return 'bg-info text-white';
}, false);
Все указанные методы в качестве значения возвращают коллекцию элементов jQuery. Рассмотрим возможность изменения класса при наведении курсора на элемент (листинг 1.7).
Листинг 1.7. Методы addClass()
, removeClass()
и toggleClass()
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Методы addClass(), removeClass() и toggleClass()</title>
<style>
div { font-size: 20px; margin: 20px; }
.cls1 { color: #000000; text-decoration: none; }
.cls2 { color: #ff0000; text-decoration: underline; }
</style>
</head>
<body>
<div id="div1" class="cls1">Наведите курсор на этот текст</div>
<div id="div2" class="cls1">Наведите курсор на этот текст</div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$('#div1').hover(
function() { // Если навести курсор
$(this).removeClass('cls1').addClass('cls2');
},
function() { // Если убрать курсор
$(this).removeClass('cls2').addClass('cls1');
}
);
$('#div2').hover(
function() { // Если навести курсор
$(this).toggleClass('cls2');
},
function() { // Если убрать курсор
$(this).toggleClass('cls2');
}
);
});
</script>
</body>
</html>
В этом примере мы определили два класса cls1
и cls2
. Класс cls1
описывает стиль элемента по умолчанию. Класс cls2
предназначен для описания стиля элемента при наведении курсора. После формирования структуры документа, мы добавляем обработчики событий с помощью метода hover()
. В первом параметре указывается функция, которая будет вызвана при наведении курсора. Во втором параметре указывается функция, которая будет вызвана, если курсор убрать с элемента. Внутри этих обработчиков текущий DOM-элемент доступен через указатель this
. Если курсор будет наведен на первую надпись, то удаляем класс cls1
, а затем добавляем класс cls2
:
$(this).removeClass('cls1').addClass('cls2');
Если убрать курсор с элемента, то проделываем обратную операцию. Удаляем класс cls2
и добавляем класс по умолчанию:
$(this).removeClass('cls2').addClass('cls1');
Вторая надпись демонстрирует применение метода toggleClass()
. Если навести курсор, то метод проверит, был ли класс cls2
добавлен ранее. В случае отсутствия класса он будет добавлен, в противном случае удален. По этой причине во всех событиях мы указываем одну и ту же строку:
$(this).toggleClass('cls2');
На самом деле, изменение характеристик элемента при наведении курсора, легко решается с помощью CSS без JavaScript и jQuery. Достаточно использовать псевдокласс :hover
:
<style>
div { font-size: 20px; margin: 20px; }
.cls1 { color: #000000; text-decoration: none; }
.cls1:hover { color: #ff0000; text-decoration: underline; }
</style>
Метод hasClass(<Название класса>)
позволяет определить, был ли указанный класс добавлен ранее. Возвращает true
, если класс был добавлен ранее:
<div id="div1" class="cls1">Текст</div>
function testClass(cls) {
if ( $('#div1').hasClass(cls) ) {
console.log('Определен');
}
else {
console.log('Нет');
}
}
testClass('cls2'); // Нет
$('#div1').addClass('cls2');
testClass('cls2'); // Определен
testClass('cls1'); // Определен
При первой проверке получим сообщение, что класс cls2
не определен. Далее добавляем класс и опять проверяем. В этом случае получим сообщение, что класс определен для элемента с идентификатором div1
. Обратите внимание на тот факт, что добавление нового класса не удаляет другие классы, определенные ранее.
Помощь сайту
ЮMoney (Yandex-деньги): 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов