Jquery поменять класс css

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

В данном уроке будут продемонстрированы некоторые специальные методы для работы с атрибутами элементов class :

• hasClass() для проверки того, что элемент имеет определённый класс
• addClass() для добавления класса элементу
• removeClass() для удаления класса из элемента
• toggleClass() для добавления класса элементу в том случае, если элемент ещё не имеет такого класса, или для удаления класса, если класс уже есть у элемента

Методы attr() и removeAttr() также позволяют работать с классами, но использование методов, описанных в данном уроке позволяет получить следующие преимущества при работе с классами CSS:

• Они значительно облегчают использование классов СSS в jQuery
• Значения атрибута class часто содержат много имён классов, что усложняет работу с ним по сравнению с другими атрибутами.

Рассмотрим каждый метод в отдельности.

Проверка класса с помощью метода hasClass()

С помощью метода hasClass() вы можете проверить, есть ли хотя бы один элемент с определённым классом. Нужно передать методу имя класса, который нужно проверить. Метод hasClass() возвращает true , если хотябы один элемент в объекте jQuery имеет указанный класс, или false в другом случае.

Ниже приводится пример использования метода hasClass() . Скрипт выдаст сообщение «Нашёл», потому что первый div на странице содержит класс «summary» :

      
Этот элемент имеет класс summary
 
Это другой div
 
и ещё один div
   

Добавляем класс с помощью метода addClass()

если Вы хотите добавить класса к элементу, используйте метод addClass() , передав ему имя класса, который нужно добавить:

// Добавляем класс 'summary' к #myDiv $('#myDiv').addClass('summary');

Если у элемента уже есть указанный класс, метод addClass() не производит никаких действий.

Также можно добавить один и тот же класс нескольким элементам сразу:

// Добавляем класс 'summary' всем элементам div на странице $('div').addClass('summary');

чтобы добавить несколько классов, нужно разделить их имена пробелами:

// Добавляем классы 'header' и 'summary' к #myDiv $('#myDiv').addClass('header summary');

Вы можете передать возвратную функцию методу addClass() . Возвратная функция должна принимать два аргумента 2:

• Индекс позиции текущего элемента в наборе (начинается с ноля)
• старое значение атрибута class для текущего выбранного элемента

Функция должна возвращать имя класса для добавления (или несколько имён, разделённых пробелами).

Удаление классов с помощью метода removeClass()

Метод removeClass() удаляет один или более классов из одного или нескольких элементов. Синтаксис вызова идентичен синтаксису вызова метода addClass() . Единственным отличием является то, что вы можете не передавать имя класса в качестве аргумента, потому что в этом случае метод удалит все классы из элемента.

Примеры использования метода removeClass() :

// Удаляем класс ‘summary’ из #myDiv $(‘#myDiv’).removeClass(‘summary’); // Удаляем классы ‘header’ и ‘summary’ из #myDiv $(‘#myDiv’).removeClass(‘header summary’); // Удаляем класс ‘summary’ из всех div на странице $(‘div’).removeClass(‘summary’); // Удаляем все классы из всех div на странице $(‘div’).removeClass(); // Пример использования возвратной функции: удаляем класс ‘summary’ только из первых трёх div на странице $(‘div’).removeClass( firstThreeOnly ); function firstThreeOnly( index, classAttribute )

Переключение классов с помощью метода toggleClass()

Метод toggleClass() позволяет переключать класс для одного или нескольких элементов. Другими словами, если элемент имеет класс, то метод его удаляет; если у элемента не было такого класса, то метод его добавляет.

Метод toggleClass() используется с аргументов в виде имени класса, который нужно переключить:

// Переключаем класс 'summary' для элемента #myDiv $('#myDiv').toggleClass('summary'); // Переключаем класс 'summary' для всех div $('div').toggleClass('summary');

Для переключения нескольких классов, их имена нужно разделить пробелами:

// Переключаем классы 'header' и 'summary' для элемента #myDiv $('#myDiv').toggleClass('header summary');

Вы также можете управлять режимами переключения с помощью второго аргумента метода toggleClass() :

• Если передать true , то метод toggleClass() будет всегда добавлять класс, как будто вы вызвали метод addClass() .
• Если передать false , то метод toggleClass() будет всегда удалять класс, как будто вы вызвали метод removeClass() .

// Случайно добавляет или удаляет класс 'summary' из элемента #myDiv $('#myDiv').toggleClass( 'summary', ( Math.random() < .5 ) );

Такое управление режимом переключения используется в том случае, если вы хотите переключать классы в соответствии с более сложными условиям, чем просто "Добавь класс, если его нет или удали класс, если он есть.".

Также как и метод addClass() , метод removeClass() можно использовать с возвратной функцией в качестве аргумента вместо имени класса, чтобы организовать переключение класса в зависимости от позиции элемента или других свойств. Возвратная функция должна принимать два аргумента:

• Индекс позиции текущего элемента в наборе (начинается с ноля)
• Старое значение атрибута class для текущего элемента

// Переключаем класс 'summary' только для первых трёх div на странице $('div').toggleClass( firstThreeOnly ); function firstThreeOnly( index, classAttribute )

Заключение

В данном уроке мы рассмотрели методы jQuery для работы с классами CSS:

• hasClass() для проверки того, что элемент имеет определённый класс
• addClass() для добавления класса элементу
• removeClass() для удаления класса из элемента
• toggleClass() для добавления класса элементу в том случае, если элемент ещё не имеет такого класса, или для удаления класса, если класс уже есть у элемента

Данные методы дают возможность манипулировать классами элементов с помощью 1 или 2 строк кода.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/jquery-manipulating-element-classes/
Перевел: Сергей Фастунов
Урок создан: 10 Августа 2010
Просмотров: 98830
Правила перепечатки

5 последних уроков рубрики "jQuery"

• 

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Источник

Получение и установка CSS-свойств элементам в jQuery

В jQuery работа со стилями HTML элементов осуществляется через метод css . Данный метод используется как получения значения стилей, так и для их добавления, изменения и удаления.

Как получить стиль элемента в jQuery

Первый вариант метода css - это получение окончательного значения CSS-свойства непосредственно применяемого к элементу.

// Вариант 1 (получение окончательного одного CSS свойства) .css( propertyName ) // propertyName (тип: Строка) – имя CSS-свойства, значение которого нужно получить .css( propertyNames ) // propertyName (тип: Массив) – массив, состоящий из одного или нескольких CSS-свойств, значения которых нужно получить

Данный метод, если его применить к набору элементов, возвращает значение CSS свойства только для первого его элемента.

Пример, в котором получим цвет фона непосредственно применённого к элементу #header :

var bgHeader = $('#header').css('background-color');

В jQuery названия CSS-свойств можно указывать как в CSS, так и как это принято в JavaScript. Т.е. убирать дефисы и заменять буквы, следующие за каждым дефисом на прописные.

// можно и так var bgHeader = $('#header').css('backgroundColor');

Если необходимо получить значения указанного CSS свойства или набора этих свойств у всех элементов текущего набора, то в этом случае необходимо использовать, например, метод each.

Например, определим значение свойства display у всех выбранных элементов и выведем их в консоль:

// переберём все элементы .container $('.container').each(function(index){ // значение css-свойства display текущего элемента набора var display = $(this).css('display'); // выведем результат в консоль (индекс элемента в наборе и его значение css-свойства display) console.log(index + '. display = '+ display); });

Кроме этого, метод css позволяет также получить сразу несколько CSS свойств у элемента.

Например, при нажатии на HTML элемент div выведим его ширину и высоту:

 .  

Как изменить или добавить стиль к элементу в jQuery

Установить стиль элементу осуществляется тоже с помощью метода css, но в этом случае используется следующий синтаксис:

// 1 вариант (для установки одного стиля элементу) .css( propertyName, value ) // 2 вариант (установка значения стиля с помощью функции) css( propertyName, function ) // 3 вариант (для установки несколько стилей элементу) css( properties ) // Описание параметров: // propertyName (тип: String) – имя CSS-свойства // value (тип: String или Number) – значение, которое нужно установить CSS-свойству // function – функция, результат выполнения которой будет установлен в качестве значения CSS-свойству // Синтаксис функции: // Function( Integer index, String value ) => String или Number // В качестве аргументов функция получает индекс элемента (index) и текущее окончательное значение CSS-свойства (value) // properties (тип: объект JavaScript, содержащий ноль или более пар ключ-значение) – объект, состоящий из пар DOM-свойство-значение, которые нужно установить элементу.

При установлении стилей с помощью метода css , они задаются ко всем элементам текущего набора.

Например, добавим ко всем элементам .info серый цвет фона (background):

Если необходимо применить к каждому элементу текущего набора сразу несколько CSS свойств, то в качестве параметра этого метода необходимо использовать объект JavaScript, содержащий пары 'имяСвойства' : значение.

.css({'имяСвойства1':значение, 'имяСвойства2':значение. })

Пример, в котором показано как можно задать несколько CSS-свойств к элементам .success :

$('.success').css({ 'color':'green', 'font-size':'16px' });

В качестве значения строки также можно использовать относительные значения, которые начинаются с += или -= . Первое выражение используется для увеличения текущего значения CSS свойства, а второе - для уменьшения.

Например, увеличим отступ слева и справа у элементов .container на 10px :

$('.container').css({ "padding-left": "+=10", "padding-right":"+=10" });

Ещё один способ использования метода css - это применение в качестве 2 параметра функции.

.css('имяСвойства',функция) // функция: Function( Integer index, String value ) => String или Number

Вариант использования метода css, у которого в качестве второго параметра используется функция обычно находить применение, когда значение необходимо как-то вычислить или определить по какому-то алгоритму.

Например, установим всем элементам .text , у которых цвет шрифта не равен чёрному, CSS свойство color , равное red .

$('.text').css('color',function(index,value){ if (value!=='rgb(0, 0, 0)') { return 'red'; } });

Например, поменяем значение CSS свойства width у всех элементов img на странице, находящихся #content :

Как удалить определённый стиль у элемента

Для того чтобы в jQuery убрать определённый стиль у элемента, ему необходимо присвоить просто пустую строку.

Например, уберём у всех изображений на странице CSS свойство height :

Источник