jQuery - Get and Set CSS Classes
С помощью jQuery легко манипулировать CSS элементов.
jQuery манипулирования CSS
JQuery имеет несколько методов для манипуляции CSS. Мы будем смотреть на следующие методы:
- addClass() - Добавление одного или нескольких классов к выбранным элементам
- removeClass() - Удаление одного или нескольких классов из выбранных элементов
- toggleClass() - Переключение между добавлением/удалением классов из выбранных элементов
- css() - Задает или возвращает атрибут style
Пример таблицы стилей
Следующая таблица стилей будет использоваться для всех примеров на этой странице:
.important
{
font-weight: bold;
font-size: xx-large;
}
.blue
{
color: blue;
}
Метод jQuery AddClass ()
В следующем примере показано, как добавить атрибуты класса к различным элементам. Конечно, вы можете выбрать несколько элементов, при добавлении классов:
Пример
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
Можно также указать несколько классов в методе AddClass ():
Пример
$("button").click(function(){
$("#div1").addClass("important blue");
});
Метод jQuery removeClass ()
В следующем примере показано, как удалить определенный атрибут class из различных элементов:
Пример
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
Метод jQuery toggleClass()
В следующем примере будет показано, как использовать метод jQuery toggleClass (). Этот метод переключает между добавлением/удалением классов из выбранных элементов:
Пример
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
Метод jQuery CSS()
Метод jQuery CSS () будет объяснен в следующей главе.
jQuery CSS справочник
Для полного обзора всех jQuery CSS методы, пожалуйста, перейдите на наш jQuery HTML/CSS справка.
