Последние учебники веб-разработки
 

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

❮ Предыдущая Следующая Глава ❯

С помощью JQuery, легко манипулировать CSS элементов.


JQuery Манипуляции CSS

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

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

Пример Stylesheet

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

.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() метод будет объяснено в следующей главе.

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»

JQuery CSS Reference

Полный обзор всех методов JQuery CSS, пожалуйста , перейдите на наш / CSS Reference JQuery HTML .


❮ Предыдущая Следующая Глава ❯