Присвоение и удаление классов с помощью JavaScript

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

Рассматриваемая нами операция одна из самых часто используемых манипуляций с DOM. Пользователь нажимает на кнопку закрытия? Добавляем класс hidden модальному окну. Чуть ранее чтобы добиться подобного эффекта я использовал jQuery! Сегодня следует от этого отвыкать и использовать нативные JS функции. Знакомимся с свойством classList.

Element.classList

Свойство classList возвращает список классов, применённых к элементу. К счастью для нас, существует несколько удобнейших методов:

  • add - добавление класса
  • remove - удаление класса
  • toggle - переключение класса
  • contains - проверка наличия класса

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

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

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

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

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

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

Поддержка

Поддержка данного свойства довольно-таки широкая. Если говорить о IE, то он поддерживает данную фишку, начиная с 10 версии, но к счастью у нас есть некий хак, который позволит реанимировать classList в IE8.

Для более ранних версий браузеров

Выше упомянутый хак можно найти на GitHub.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://callmenick.com/post/add-remove-classes-with-javascript-property-classlist
Перевел: Станислав Протасевич
Урок создан: 28 Апреля 2015
Просмотров: 32974
Правила перепечатки

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

^ Наверх ^