ClassList JavaScript — це властивість DOM JavaScript, яка дозволяє стилізувати класи CSS (каскадна таблиця стилів) елемента. JavaScript classList — це властивість лише для читання, яка повертає назви класів CSS. Це властивість JavaScript відносно інших властивостей JavaScript, яка включає стиль і className. Властивість style повертає колір або інший стиль елемента класу CSS, а className використовується для повернення імен класів, які використовуються у файлі CSS. Проте властивості className і classList повертають імена класів, які ми використовували у файлі CSS, але різними способами. Властивість className повертає назву класів у вигляді рядка, тоді як властивість classList JavaScript повертає назву класів у вигляді масиву.

Тут ми коротко розглянемо JavaScript classList, а також обговоримо його методи та їх практичну реалізацію.

Приклад властивості classList JavaScript

Нижче наведено приклад властивості classList JavaScript, за допомогою якої ми отримаємо значення класу елемента.

 <h3>Click on the button to get the class value </h3><br> function getClass() { var e = document.getElementById(&apos;btn&apos;); alert(e.classList); } 

Вихід наведеного вище коду показано нижче:

Властивість classList JavaScript

Властивість classList використовується для представлення значення елементів класу, яким є a DOMTokenList об'єкт. Це властивість лише для читання, але ми можемо змінити її значення, маніпулюючи класами, які використовуються в програмі. Властивість classList JavaScript складається з таких методів, за допомогою яких ми можемо виконувати різні операції над елементами класу:

додати():Метод add() використовується для додавання одного або кількох класів до елемента.видалити():Метод remove() використовується для видалення одного або кількох класів із числа класів, присутніх в елементі.перемикати():Метод toggle() використовується для перемикання вказаних імен класів елемента. Це означає, що одним клацанням миші додається вказаний клас, а іншим – видаляється. Це властивість елемента перемикання.замінити():Метод replace() використовується для заміни існуючого класу на новий.містить():Метод contains() властивості classList JavaScript використовується для повернення логічного значення як результат. Якщо клас присутній, значення повертається як true, інакше повертається false.елемент():Метод item() використовується для відображення назви класів за певним індексом. Таким чином, він повертає назву класу.

Це деякі з методів, які використовуються в JavaScript classList.

Ми будемо обговорювати по одному.

classList.add()

Функція, яка використовується для додавання одного або кількох класів до елемента CSS.

приклад:

У прикладі нижче показано, як додати клас за допомогою методу classList.add():

 .myClass {background: red;} <h3> Click on the button and add the class</h3> <br> function getClass() { var e = document.getElementById(&apos;Btn&apos;); e.classList.add(&apos;myClass&apos;); } 

У коді, коли користувач натискає кнопку, новий клас додається до наявних класів. Результат після натискання кнопки показаний нижче:

classList.remove()

Функція remove() використовується для видалення існуючих класів з елементів.

базова смуга проти широкосмугової

У прикладі нижче показано, як видалити один або кілька класів за допомогою методу classlist.remove():

 .myClass {background: red;} <h3> Click on the button and remove the class </h3> <br> function getClass() { var e = document.getElementById(&apos;Btn&apos;); e.classList.remove(&apos;myClass&apos;); } 

У наведеному вище коді, коли користувач натискає кнопку, конкретний вказаний клас видаляється з існуючих класів CSS. Результат після натискання кнопки показаний нижче:

Classlist.toggle()

Кнопка toggle() використовується для перемикання класів на елемент. Це означає додавання нового класу або видалення існуючих класів.

Нижче наведено приклад, який допоможе нам зрозуміти, як використовувати метод toggle() для додавання або видалення класів.

код abs c

приклад:

 .myClass1{background: red;} .myClass2 {background: blue;} <h3> Click on the button to add or remove the class</h3> <br> function get_toggle() { var e = document.getElementById(&apos;Btn&apos;); e.classList.toggle(&apos;myClass2&apos;); } 

У коді, коли користувач натискає кнопку, клас додається або видаляється з класів CSS. Результат після натискання кнопки показаний нижче:

Classlist.contains()

Метод contains() використовується для перевірки наявності зазначеного класу в класах CSS і щодо нього повертає логічне значення як true або false.

Нижче наведено приклад, який показує, як шукати клас, якщо він існує чи ні, використовуючи метод contains():

приклад:

 function getClass() { var e = document.getElementById(&apos;Btn&apos;); document.write(e.classList.contains(&apos;myClass&apos;)+&apos; <br>&apos;+&apos;myclass is the name of the class&apos;); } 

У наведеному вище коді видно, що коли користувач натискає кнопку, він перевіряє наявність зазначеного класу в класах CSS. Якщо він присутній, буде повернено логічне значення як true. Інакше він поверне false. Результат коду вище після натискання кнопки показано нижче:

classlist.replace()

Метод replace() використовується для заміни існуючого класу на новий. Це не означає, що клас видаляється з елементів, але властивості існуючого класу замінюються властивостями нового класу.

Нижче наведено приклад, за допомогою якого ми зрозуміємо, як ми можемо замінити існуючий клас новим класом:

приклад:

 .myClass1 {background: red;} .myClass2 {background: blue;} function replace_Class() { var e = document.getElementById('Btn'); e.classList.replace('myClass1', 'myClass2'); } 

У наведеному вище коді, коли користувач натискає кнопку, існуючі властивості класу замінюються новими властивостями класу. Результат після натискання кнопки показаний нижче:

classList.item()

Функція item() використовується для повернення імені класу, який присутній у вказаному значенні індексу.

Нижче наведено приклад, який допоможе нам зрозуміти, як використовувати метод item() для повернення значення:

приклад:

 <h3> Click on the button to get the specified index value</h3><br> function get_Class() { var e = document.getElementById(&apos;Btn&apos;); alert(e.classList.item(2)); } 

У коді, коли користувач клацає на кнопці, відображається клас, присутній у зазначеному індексі. Після натискання кнопки ми отримуємо вказане значення класу індексу, як показано нижче:

Це деякі з методів DOM-об’єкта classList і все про classList.