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

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

Element.classList

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

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

Примеры:

// добавление элементу класс "foo"
el.classList.add("foo");

// удаление класса "bar"
el.classList.remove("bar");

// переключение класса "foo"
el.classList.toggle("foo");

// возвращает "true" если у класса есть класс "foo", в противном случае "false"
console.log( el.classList.contains("foo") );

// добавление нескольких классов
el.classList.add( "foo", "bar" );

Поддержка

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

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

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

^ Наверх ^