Добавление/удаление классов с помощью JavaScript свойства classList
classList - это свойство, которое открывает нам доступ к четырём методам. С их помощью мы можем добавлять, удалять и проверять наличие класса у того или иного элемента средствами нативного JavaScript-кода.
Element.classList
Свойство classList возвращает список классов элемента. Так же в этом свойстве присутствует 4 метода:
add – добавление класса;
remove – удаление класса;
toggle – переключение класса;
contains – проверка наличия класса у элемента.
Примеры:
Поддержка
Все современные браузеры поддерживают данный функционал. IE тоже, начиная с 10 версии (так же есть специальная библиотека, которая позволяет данным методам работать в IE7 и выше).
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" );
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
Перевел: Станислав Протасевич
Перевел: Станислав Протасевич
-D-I-N-I-S-
23.03.16 в 19:53
1.2k
0
Источник