jQuery - Получение и Установка CSS Классов

Рубрика: jQuery и HTML

В библиотеке 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 - Фильтрация

Смотрите также

Комментарии

Написать