Jquery изменить css класс

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

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

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

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

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

jQuery метод addClass()

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

Также, в методе addClass() можно задавать несколько классов:

jQuery метод removeClass()

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

jQuery метод toggleClass()

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

jQuery метод css()

О 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
Просмотров: 98818
Правила перепечатки

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

• 

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

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

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

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

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

Источник

Category: Class Attribute

These methods inspect and manipulate the CSS classes assigned to elements.

.addClass()

Adds the specified class(es) to each element in the set of matched elements.

.hasClass()

Determine whether any of the matched elements are assigned the given class.

.removeClass()

Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

.toggleClass()

Add or remove one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the state argument.

• Ajax
  • Global Ajax Event Handlers
  • Helper Functions
  • Low-Level Interface
  • Shorthand Methods
  • Deprecated 1.3
  • Deprecated 1.7
  • Deprecated 1.8
  • Deprecated 1.9
  • Deprecated 1.10
  • Deprecated 3.0
  • Deprecated 3.2
  • Deprecated 3.3
  • Deprecated 3.4
  • Deprecated 3.5
  • Basics
  • Custom
  • Fading
  • Sliding
  • Browser Events
  • Document Loading
  • Event Handler Attachment
  • Event Object
  • Form Events
  • Keyboard Events
  • Mouse Events
  • Class Attribute
  • Copying
  • DOM Insertion, Around
  • DOM Insertion, Inside
  • DOM Insertion, Outside
  • DOM Removal
  • DOM Replacement
  • General Attributes
  • Style Properties
  • Collection Manipulation
  • Data Storage
  • DOM Element Methods
  • Setup Methods
  • Properties of jQuery Object Instances
  • Properties of the Global jQuery Object
  • Attribute
  • Basic
  • Basic Filter
  • Child Filter
  • Content Filter
  • Form
  • Hierarchy
  • jQuery Extensions
  • Visibility Filter
  • Filtering
  • Miscellaneous Traversing
  • Tree Traversal
  • Version 1.0
  • Version 1.0.4
  • Version 1.1
  • Version 1.1.2
  • Version 1.1.3
  • Version 1.1.4
  • Version 1.2
  • Version 1.2.3
  • Version 1.2.6
  • Version 1.3
  • Version 1.4
  • Version 1.4.1
  • Version 1.4.2
  • Version 1.4.3
  • Version 1.4.4
  • Version 1.5
  • Version 1.5.1
  • Version 1.6
  • Version 1.7
  • Version 1.8
  • Version 1.9
  • Version 1.11 & 2.1
  • Version 1.12 & 2.2
  • Version 3.0
  • Version 3.1
  • Version 3.2
  • Version 3.3
  • Version 3.4
  • Version 3.5
  • Version 3.6
  • Version 3.7

  Books

  Copyright 2023 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more information. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation Terms of Use, Privacy, and Cookie Policies also apply. Web hosting by Digital Ocean | CDN by StackPath

  Источник

  jQuery - Get and Set CSS Classes

  With jQuery, it is easy to manipulate the style of elements.

  jQuery Manipulating CSS

  jQuery has several methods for CSS manipulation. We will look at the following methods:

  • addClass() - Adds one or more classes to the selected elements
  • removeClass() - Removes one or more classes from the selected elements
  • toggleClass() - Toggles between adding/removing classes from the selected elements
  • css() - Sets or returns the style attribute

  Example Stylesheet

  The following stylesheet will be used for all the examples on this page:

  .important <
  font-weight: bold;
  font-size: xx-large;
  >

  jQuery addClass() Method

  The following example shows how to add class attributes to different elements. Of course you can select multiple elements, when adding classes:

  Example

  You can also specify multiple classes within the addClass() method:

  Example

  jQuery removeClass() Method

  The following example shows how to remove a specific class attribute from different elements:

  Example

  jQuery toggleClass() Method

  The following example will show how to use the jQuery toggleClass() method. This method toggles between adding/removing classes from the selected elements:

  Example

  jQuery css() Method

  The jQuery css() method will be explained in the next chapter.

  jQuery Exercises

  jQuery CSS Reference

  For a complete overview of all jQuery CSS methods, please go to our jQuery HTML/CSS Reference.

  

  COLOR PICKER

  

  

  Report Error

  If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

  Thank You For Helping Us!

  Your message has been sent to W3Schools.

  Top Tutorials

  Top References

  Top Examples

  Get Certified

  W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

  Источник