jQuery — получение и установка классов CSS
С jQuery легко манипулировать стилем элементов.
jQuery, работающий с CSS
jQuery имеет несколько методов для работы с CSS. Мы рассмотрим следующие методы:
addClass()- Добавляет один или несколько классов к выбранным элементамremoveClass()- Удаляет один или несколько классов из выбранных элементовtoggleClass()- Переключение между добавлением/удалением классов из выбранных элементовcss()- Устанавливает или возвращает атрибут стиля
Пример таблицы стилей
Для всех примеров на этой странице будет использоваться следующая таблица стилей:
.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()
В следующем примере показано, как удалить определенный атрибут класса из разных элементов:
Пример
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
Метод jQuery toggleClass()
В следующем примере показано, как использовать toggleClass()метод jQuery. Этот метод переключается между добавлением/удалением классов из выбранных элементов:
Пример
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
Метод jQuery css()
Метод jQuery css()будет объяснен в следующей главе.
jQuery-упражнения
Справочник по jQuery CSS
Полный обзор всех CSS-методов jQuery см. в нашем справочнике по jQuery HTML/CSS .