Поменять класс элемента jquery

Поменять класс элемента jquery

Чтобы поменять класс у элемента при помощи jQuery используется функция .toggleClass(className) .

Пример

Способ 1

Способ 2

Способ немного длиннее.

Категории

Читайте также

Комментарии

Кратко, понятно и очень полезно, спасибо

Илья Тюрин, без проблем 🙂

Введите данные указанные при регистрации:

Социальные сети

Вы можете быстро войти через социальные сети:

Поменять класс по клику на JQuery? А потом вернуть при повторном клике? Легко! Давайте научимся этому.

Сейчас мы научимся менять класс у элемента по клику на нем. В принципе, функция универсальная и можно изменить ее как угодно — менять класс у другого элемента, нескольких элементов, у другого и этого и так далее, на что только хватит вашей фантазии. Давайте для начала создадим элемент:

Это обычный блочный элемент. Ничего особенного, для примера — в самый раз.

Теперь зададим стили:

Я задал следующие стили для элемента div: ширину, равную 100px, высоту, равную 100px и рамку, для визуального определения нашего блока. Также я задал класс click, которому присвоил фоновый зеленый цвет. То есть элемент, имеющий класс click будет залит зеленым цветом.

Теперь попробуем с вами написать скрипт, который будет выполнять следующее: по клику по блоку div, он будет присваивать ему класс click. При повторном клике — убирать. Все просто. Вот что у меня получилось:

Скрипт выполняет следующее: когда документ загружен ((document).ready), по клику на элементе div ($('div')), ему присваивается класс click ($(this).toggleClass('click');), а при повторном клике убирается (за это как раз отвечает функция toggleClass — или переключатель).

Не забывайте, что скрипт написан на языке JQuery, а значит нам понадобится предварительно подключить к странице свежую библиотеку. Вот собственно и все.

Статья, в которой разберем методы jQuery для управления классами элементов. Рассмотрим это как на примере универсальных методов (attr, removeAttr, prop), так и методов специально предназначенных для этого (addClass, hasClass, removeClass, toggleClass).

Что такое классы HTML-элементов?

Класс – это некоторая сущность, которую можно добавить к элементам, а затем использовать её в CSS или JavaScript, например, для выбора этих элементов.

В HTML коде добавление одного или нескольких классов к элементу осуществляется через атрибут class .

Читайте также:  Как удалить абонента из скайпа

Пример, в котором HTML-элемент div имеет класс container :

Но добавить к элементу можно не только один, а любое количество классов . Отделение классов друг от друга осуществляется с помощью пробела.

Пример, в котором HTML элемент a имеет классы btn , btn-red и btn-large :

Имя класса всегда должно начинаться с буквы A-Z или a-z. В качестве символов в имени класса разрешается использовать буквы A-Z или a-z, цифры (0-9), дефис ("-") и подчеркивание ("_").

Кроме этого, при указании класса обращайте внимание на то, что он является регистрозависимым. Т.е., например, класс Alert это не одно и тоже что alert .

Классы – это один из самых частых способов выбора элементов на странице. Они очень часто используются как в CSS, так и в JavaScript.

Пример использования классов:

Работа с классами через атрибут class

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

Основное ограничение данных методов относительно работы с классами связано с тем, что они оперируют с ними как с целой строкой. Т.е. с их помощью, например, нельзя просто добавить какой-то один дополнительный класс к элементу или удалить его у него. Чтобы это выполнить нужно писать какой-то дополнительный код, что не очень удобно. Но если работать с классами элемента не нужно по отдельности, то данные методы будут очень удобными и в этом случае лучше использовать их. Например, когда вам нужно при создании элемента добавить к нему один или несколько классов.

Пример работы с атрибутом class :

Работа с классами через DOM-свойство className

Другой вариант – это работать с классами элемента не через атрибут class , а через DOM-свойство className . Этот вариант более предпочтительный чем вариант работы с классами через атрибут class . Но он также, как и предыдущий инструмент позволяет оперировать с ними, только как с целой строкой. Более подробно почитать про атрибуты и DOM-свойства можно в этой статье.

Если кратко, то сначала нужно разобраться что такое DOM.

DOM – это фундаментальная сущность, которую браузер создаёт после получения HTML кода запрашиваемой страницы и её парсинга. DOM – это объектная модель HTML страницы и API для работы с ней через JavaScript. Это означает то, что с помощью JavaScript сценариев вы можете изменять DOM "на лету" и тем самым страницу. Но DOM браузер создаёт не только для взаимодействия с ней через JavaScript. Он её, например, также использует для создания других структур, которые используются для отрисовки страницы во вкладке браузера.

Читайте также:  Ошибка directx device creation error

При создании браузером DOM, HTML-теги становятся объектами, а HTML-атрибуты – свойствами этих объектов. Обычно имена атрибутов и соответствующих им DOM-свойств совпадают. Но, например, атрибут class и соответствующее ему DOM-свойство className нет. Связано с тем, что раньше ключевые слова нельзя было использовать в качестве названия DOM-свойств. Из-за этого было выбрано в качестве названия className . В последствии, когда это ограничение убрали имя DOM-свойству не стали изменять и сейчас она имеет тоже самое название.

В jQuery для работы с DOM-свойствами используется метод prop.

Рассмотрим применения данного метода для управления классами элемента.

Работа с классами через специальные методы

В jQuery имеются специальные методы, предназначенные именно для работы с классами. Всего их четыре. Это addClass , hasClass , removeClass и toggleClass .

Эти методы очень нужны, когда вам нужно выполнить детальную работу с классами, например, добавить один класс к элементу или его удалить.

Метод addClass

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

К сведению, если у элемента уже есть класс, который вы хотите добавить, то в этом случае он добавлен не будет.

Синтаксис метода addClass :

Например, добавим класс при клике на элемент:

Пример, в котором добавим несколько классов ко всем элементам .btn на странице:

Пример, в котором добавим ко всем элементам li , расположенных в #browsers , класс browser-item , но за исключением тех, у которых уже есть какой-то класс:

Метод hasClass

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

Если указанный класс есть у элемента, то метод hasClass возвращает true . В противном случае он возвращает false .

Читайте также:  Как подключить адаптер беспроводной сети на компьютере

При применении его к набору элементов, он проверяет наличие указанного класса у всех них. И если указанный класс есть хотя бы у одного элемента этого набора данный метод возвращает true . В противном случае, он возвращает false .

Синтаксис метода hasClass :

Пример, в котором проверим наличие класса meow у элемента #say :

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

Метод removeClass

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

Синтаксис метода removeClass :

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

Например, удалим класс text-center у всех элементов p :

Например, уберём сразу несколько классов у элементов div :

Например, удалим все классы у элементов .message , контент у которых равен пустой строке:

Метод toggleClass

Метод toggleClass предназначен для переключения одного или нескольких классов, разделённых между собой с помощью пробела. Под переключением понимается добавление класса, если у данного элемента его нет или удаление, если этот класс у этого элемента есть.

Синтаксис метода toggleClass :

Пример, в котором переключим класс alert-warning у элементов .alert :

Данный код без использования метода toggleClass можно записать так:

Кроме этого, метод toggleClass может вести себя как addClass или removeClass . Это состояние можно установить посредством задания параметру state соответственно значения true или false .

Т.е. если параметру state установить true , то метод toggleClass будет только добавлять указанный класс к элементу, если у него его нет. И наоборот, если параметру state задать false , то метод toggleClass будет только удалять указанный класс, т.е. он будет вести себя как removeClass .

Пример, в котором добавим класс text-right только к тем элементам p на странице, у которых его нет:

Пример, в котором удалим класс text-center только у тех элементов div , у которых он есть:

Пример, в котором переключим класс text-lead с помощью функции. Выполним это для элементов .text , у которых размер шрифта равен 24px:

Ссылка на основную публикацию
Пикап фразы в соц сетях
Источники: Интернет, друзья, подруги. - Девyшка, а yгадайте, как вас зовyт ? * - Девyшка ! Вино какого лаpька вы...
Отсутствует стим апи длл
С ошибкой steam_api.dll отсутствует или же точка входа в процедуру steam_api не найдена сталкиваются многие пользователи, решившие поиграть в игру,...
Отсутствует учетная запись системного администратора sql
Delphi site: daily Delphi-news, documentation, articles, review, interview, computer humor. Учетная запись sa является учетной записью системного администратора. В версиях,...
Плазменные телевизоры для кухни
Диагональ — 24" Разрешение — 1366 x 768 Выход в интернет (Smart TV) — нет Поддержка Wi-Fi — нет Все...
Adblock detector