Как удалить класс в js

Добавляем и удаляем CSS-классы при помощи Javascript

В этой статье мы расскажем о двух способах манипуляции с HTML class . В первом используется Javascript-свойство classList , а во втором задействуется библиотека jQuery . Для начала, взгляните на следующий код:

В нем представлена кнопка с событием onclick , которое позволяет переключать цвет кнопки. CSS-код определяет классы для установки цвета фона:

Единственное, что здесь остается сделать, это реализовать функцию toggleColor() :

classList

У каждого элемента есть свойство classList , которое содержит в себе атрибуты HTML style class . Это свойство включает в себя методы, позволяющие добавлять или удалять классы:

В приведенном выше примере используется три метода classList .

contains() – возвращает значение true , если у элемента имеется родительский класс. Если же его нет, то возвращается значение false ;
add() – добавляет заданный класс к элементу. Это действие игнорируется, если элемент уже содержит заданный класс;
Remove() — заданный класс, при его наличии, удаляется.

Эту задачу можно решить проще при помощи метода toggle() , который добавляет указанный атрибут class в HTML при его отсутствии, или удаляет его, если он уже применен:

При работе с несколькими классами их можно разделять запятыми:

Единственный недостаток данного подхода заключается в том, что он был представлен лишь в HTML5 , и не факт, что он будет хорошо поддерживаться устаревшими браузерами.

JQuery

jQuery предлагает методы, которые работают по тому же принципу. Но также позволяют использовать укороченные свойства для выделения элементов. Давайте посмотрим, как функция toggleColor() должна быть написана на jQuery :

Можно использовать addClass() , removeClass() и hasClass() для toggleColor() . Обратите внимание, что новые HTML style class можно перечислять через пробел в той же строке.

На этом все! Теперь вы знаете, как без труда изменять внешний вид DOM-элементов !

+ бесплатная консультация Skypro

писец.
1.Почему не выделили в список методы для управления классами?
И почему в списке нет метода Toggle, но при этом его внизу описывают как будто это бесполезный метод и в список его заносить не нужно.
2.А что для работы с элементами люди пользуются ID только?, я вот искал как JS по классу находит элемент и добавляет, удаляет другие классы. Люди стараются наоборот не использовать ID, так как как правило все элементы повторяются на сайте, и только и исключительных случаях они не повторяются.
Кнопки, формы, поля, переключатели, виджеты, почти всегда во множественном количестве присутствуют.

Убираем класс с помощью classList.remove

Мы убедились, что JavaScript действительно нашёл элемент с классом page . Пора заняться переключением тем. У найденного элемента есть ещё второй класс — light-theme , благодаря ему на странице включена светлая тема. Чтобы не было смешения стилей, когда мы переключим тему, этот класс у элемента нужно убрать. Для этого нам понадобится метод classList.remove . Используют его так:

Метод убирает с элемента тот класс, который указан в скобках. Обратите внимание, что мы не ставим точку перед именем класса в classList.remove . Это не селектор, JavaScript и так знает, что мы имеем дело с классом.

Обратите внимание, что буква «L» в названии метода заглавная. JavaScript чувствителен к регистру. Если написать classlist.remove , метод не сработает.

Чтобы выключить светлую тему, убрав класс light-theme у элемента page , используем инструкцию:

Получился такой «паровозик»: найди элемент, а потом убери у него класс. Давайте посмотрим, что произойдёт, когда эта инструкция выполнится:

Добавление/удаление классов с помощью JavaScript свойства classList

classList — это свойство, которое открывает нам доступ к четырём методам. С их помощью мы можем добавлять, удалять и проверять наличие класса у того или иного элемента средствами нативного JavaScript-кода.

Element.classList

Свойство classList возвращает список классов элемента. Так же в этом свойстве присутствует 4 метода:

add – добавление класса;
remove – удаление класса;
toggle – переключение класса;
contains – проверка наличия класса у элемента.

Поддержка

Все современные браузеры поддерживают данный функционал. IE тоже, начиная с 10 версии (так же есть специальная библиотека, которая позволяет данным методам работать в IE7 и выше).

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://callmenick.com/2014/10/23/add-remove-classes-with-javascript-property-classlist/
Перевел: Станислав Протасевич
Урок создан: 23 Октября 2014
Просмотров: 160415
Правила перепечатки

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

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

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