jQuery получить и установить CSS-класс

С помощью jQuery легко работать с CSS-элементами.

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()

Ниже приведен пример того, как использовать метод jQuery toggleClass(). Этот метод позволяет добавлять/удалять классы у выбранных элементов:

Пример

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

Попробуйте сами

Метод jQuery css()

Мы рассмотрим метод jQuery css() в следующей главе.

jQuery Руководство по HTML

Для получения полной информации о методах jQuery CSS, пожалуйста, посетите наш jQuery Руководство по CSS