Робота з класами

Список класів зберігається у строковій властивості className, вони записані через пробіл.

Якщо у елемента може бути один клас, то з цією властивістю ще можна працювати: задати клас, зчитати клас, видалити клас.

Якщо ж класів може бути більше - строкова властивість вже не зручна, хотілося б мати щось типу масива.

Список класів міститься у властивості classList (DOMTokenList) що має наступні зручні методи:

p.classList.contains('active');
p.classList.add('big');
p.classList.remove('hey');
p.classList.toggle('show');
p.classList.forEach(fun);

Завдання

Виконуйте у jsFiddle, CodePen.

  1. Створіть кнопку, параграф і список з 5 елементів. Задайте довільний текст елементам, одному елементу списка задайте клас active.
  2. Створіть стилі: .hide { display: none; }
    .big { font-size: 24px; line-height: 1.3em; }
    .active { color: red; }
  3. Переберіть всі елементи списка і виведіть в повідомлення текст елемента, в якого є клас active. Видаліть цей клас.
  4. Добавте клас big для параграфа.
  5. При кліку на кнопку добавляйте чи видаляйте клас hide для параграфа, щоб він з'являвся та зникав.