Изменение CSS классов

jQuery позволяет манипулировать стилями элементов.

Манипулирование классами CSS

В jQuery есть несколько методов для манипуляции с классами CSS. Мы рассмотрим следующие методы:

• addClass() - добавляет один или несколько классов отобранным элементам
• removeClass() - удаляет один или несколько классов у отобранных элементов
• toggleClass() - добавляет или удаляет класс(ы) по принципу переключателя (добавляет, если элемент не содержит класса, и удаляет, если класс есть)
• css() - возвращает или устанавливает значение атрибута style

Используемые в примерах стили

Во всех примерах в этой главе для наглядности используются следующие стили:

.important {
   font-weight: bold;
   font-size: xx-large;
}

.blue {
   color: blue;
}

jQuery метод addClass()

В следующем примере показано, как добавлять атрибут class к различным элементам. При этом во время добавления классов можно выбрать несколько элементов:

$("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() будет рассказано в следующей главе.