На цьому уроці ми розглянемо властивість classList. яке призначене для роботи з класами елемента (вузла). За допомогою його Ви можете не тільки отримати значення атрибута class у елемента, але і додати до нього нові класи або видалити у нього існуючі.
Робота з класом (класами) елемента
Робота з класами елемента (вузла) за допомогою методів getAttribute (). setAttribute () і removeAttribute () представляється скрутною, коли наприклад Вам необхідно додати, переключити або видалити якийсь один певний клас у елемента. Дані методи дозволяють працювати зі значенням атрибута class тільки цілком і не дозволяють управляти його окремими класами.
Для того щоб управляти окремими класами елемента необхідно використовувати властивість classList. Дана властивість представляє значення атрибута class у вигляді об'єкта DOMTokenList. Саме властивість classList доступно тільки для читання, а управління класом (класами) елемента здійснюється за допомогою методів об'єкта DOMTokenList.
Властивість classList (об'єкт DOMTokenList) не підтримуються в браузерах Internet Explorer 8, 9 і Opera Mini.
властивість length
Об'єкт DOMTokenList має властивість length. яке повертає кількість класів в списку. Дана властивість є тільки для читання.
Методи об'єкта DOMTokenList
add (class1, class2.) - додає один або кілька до елементу класів. Якщо вказаний клас вже є у елемента, то він не буде доданий.
contains (class) - повертає true або false залежно від того чи має елемент вказаний клас.
item (index) - повертає ім'я класу по його індексу з колекції DOMTokenList. Відлік елементів (класів) в колекції починають з 0. Якщо Ви як параметр методу item () вказали індекс неіснуючого класу (тобто індекс знаходиться поза діапазону), то даний метод поверне Вам як результат значення null.
remove (classl, class2.) - видаляє один або кілька зазначених у елемента класів. Якщо Ви вказали клас, який не існує у елемента, то це не приведе до помилки в роботі методу.
toggle (class, true | false) - перемикає вказане ім'я класу у елемента. Метод toggle має 2 параметри: class (обов'язковий) - вказується ім'я класу, який треба перемкнути; true | false (необов'язковий) - логічне значення, яке примусово змушує включити або виключити вказаний клас у елемента.
При використанні методу toogle з одним параметром, він перемикає клас. Тобто якщо даний клас є у елемента, то він його видаляє, а якщо цього класу немає у елемента, то він його додає.
При використанні методу toogle з 2 параметрами, він перемикає клас в залежності від значення 2 параметра. Якщо 2 параметр має значення true. то даний метод додає клас до елементу. А якщо 2 параметр має значення false. то даний метод видаляє вказаний клас у елемента.
При використанні методу toogle необхідно мати на увазі те, що другий параметр не підтримується в Internet Explorer 10 і 11.
Наприклад, переключити клас hidden-xs у елемента, який має id = "sidebar":
Наприклад, додати кілька класів до елементу з id = "myID":
Наприклад, видалити клас hidden-xs у елемента з id = "myID":
Наприклад, отримати ім'я першого класу у елемента з id = "myID":
Наприклад, визначити чи має елемент клас hidden-lg і якщо має, то видалити його: