JavaScript classList е DOM свойство на JavaScript, което позволява стилизиране на CSS (Cascading Style Sheet) класове на елемент. JavaScript classList е свойство само за четене, което връща имената на CSS класовете. Това е свойство на JavaScript по отношение на другите свойства на JavaScript, което включва style и 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('btn'); alert(e.classList); } Резултатът от горния код е показан по-долу:
Свойство на JavaScript classList
Свойството classList се използва за представяне на стойността на елементите на класа, която е a DOMTokenList обект. Това е свойство само за четене, но можем да променим стойността му чрез манипулиране на класовете, използвани в програмата. Свойството classList на JavaScript се състои от следните методи, чрез които можем да извършваме различни операции върху елементите на класа:
Това са някои от методите, които се използват в 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('Btn'); e.classList.add('myClass'); } В кода, когато потребителят щракне върху бутона, новият клас се добавя към съществуващите класове. Резултатът след щракване върху бутона е показан по-долу:
classList.remove()
Функцията remove() се използва за премахване на съществуващите класове от елементите.
chmod 755
Примерът по-долу показва как да премахнете един или повече класове с помощта на метода classlist.remove():
.myClass {background: red;} <h3> Click on the button and remove the class </h3> <br> function getClass() { var e = document.getElementById('Btn'); e.classList.remove('myClass'); } В горния код, когато потребителят щракне върху бутона, конкретният указан клас се премахва от съществуващите CSS класове. Резултатът след щракване върху бутона е показан по-долу:
Classlist.toggle()
Бутонът toggle() се използва за превключване на класове към елемента. Това означава добавяне на нов клас или премахване на съществуващите класове.
По-долу е даден пример, който ще ни помогне да разберем как да използваме метода toggle() за добавяне или премахване на класове.
преобразуване на булево в низ
Пример:
.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('Btn'); e.classList.toggle('myClass2'); } В кода, когато потребителят щракне върху бутона, класът ще бъде добавен или премахнат от CSS класовете. Резултатът след щракване върху бутона е показан по-долу:
Classlist.contains()
Методът contains() се използва за проверка дали посоченият клас съществува в CSS класовете и по отношение на него връща булевата стойност като true или false.
По-долу е даден пример, който показва как да търсите клас, ако съществува или не, като използвате метода contains():
Пример:
function getClass() { var e = document.getElementById('Btn'); document.write(e.classList.contains('myClass')+' <br>'+'myclass is the name of the class'); } В горния код се вижда, че когато потребителят щракне върху бутона, той проверява за посочения клас, ако присъства в 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('Btn'); alert(e.classList.item(2)); } В кода, когато потребителят щракне върху бутона, ще се покаже класът, присъстващ в посочения индекс. След като щракнем върху бутона, получаваме зададената стойност на индексния клас, както е показано по-долу:
Това са някои от методите на DOM обекта classList и всичко за classList.