JavaScript classList är en DOM-egenskap för JavaScript som gör det möjligt att utforma CSS-klasserna (Cascading Style Sheet) för ett element. JavaScript classList är en skrivskyddad egenskap som returnerar namnen på CSS-klasserna. Det är en egenskap hos JavaScript med avseende på de andra egenskaperna hos JavaScript som inkluderar stil och klassnamn. Style-egenskapen returnerar färgen eller annan stil för CSS-klasselementet, och className används för att returnera namnen på klasserna som används i CSS-filen. Egenskaperna className och classList returnerar dock namnet på de klasser som vi har använt i CSS-filen men på olika sätt. Egenskapen className returnerar namnet på klasserna i form av en sträng, medan classList-egenskapen för JavaScript returnerar namnet på klasserna i form av en array.
java bruksdatum
Här kommer vi att ta en kort diskussion om JavaScript classList och även diskutera dess metoder med deras praktiska implementeringar.
Exempel på JavaScript classList-egenskap
Nedan är ett exempel på JavaScript classList-egenskap genom vilken vi kommer att få klassvärdet för ett element.
<h3>Click on the button to get the class value </h3><br> function getClass() { var e = document.getElementById('btn'); alert(e.classList); } Utdata från ovanstående kod visas nedan:
JavaScript classList Property
Egenskapen classList används för att representera värdet av klasselementen som är a DOMTokenList objekt. Det är en skrivskyddad egenskap men vi kan ändra dess värde genom att manipulera klasserna som används i programmet. JavaScript classList-egenskapen består av följande metoder genom vilka vi kan utföra olika operationer på klasselementen:
Det här är några av metoderna som används i JavaScript classList.
Vi kommer att diskutera en efter en.
classList.add()
Funktionen som används för att lägga till en eller flera klasser till CSS-elementet.
Exempel:
hur man kontrollerar skärmens storlek
Nedan exempel visar hur man lägger till en klass med metoden 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'); } I koden, när användaren klickar på knappen, läggs den nya klassen till med de befintliga klasserna. Utgången efter att ha klickat på knappen visas nedan:
classList.remove()
Remove()-funktionen används för att ta bort befintliga klasser från elementen.
Nedan exempel visar hur man tar bort en eller flera klasser med metoden 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'); } I koden ovan, när användaren klickar på knappen, tas den specifika klassen bort från de befintliga CSS-klasserna. Utgången efter att ha klickat på knappen visas nedan:
Classlist.toggle()
Toggle()-knappen används för att växla klasser till elementet. Det innebär att lägga till en ny klass eller ta bort de befintliga klasserna.
Nedan är ett exempel som kommer att få oss att förstå hur man använder metoden toggle() för att lägga till eller ta bort klasser.
java initiera array
Exempel:
.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'); } I koden, när användaren klickar på knappen, kommer klassen att läggas till eller tas bort från CSS-klasserna. Utgången efter att ha klickat på knappen visas nedan:
Classlist.contains()
Metoden contains() används för att kontrollera om den angivna klassen finns i CSS-klasserna och med avseende på den returnerar den det booleska värdet som true eller false.
Nedan är ett exempel som visar hur man söker efter en klass om den finns eller inte med hjälp av contains()-metoden:
Exempel:
function getClass() { var e = document.getElementById('Btn'); document.write(e.classList.contains('myClass')+' <br>'+'myclass is the name of the class'); } I ovanstående kod ser man att när användaren klickar på knappen, då söker den efter den angivna klassen om den finns i CSS-klasserna. Om det finns kommer ett booleskt värde som sant att returneras. Annars kommer det att returnera falskt. Utdata från ovanstående kod efter att ha klickat på knappen visas nedan:
classlist.replace()
Metoden replace() används för att ersätta en befintlig klass med en ny. Det betyder inte att klassen tas bort från elementen men egenskaperna för den befintliga klassen ersätts med egenskaperna för den nya klassen.
Nedan är ett exempel genom vilket vi kommer att förstå hur vi kan ersätta en befintlig klass med en ny klass:
Exempel:
.myClass1 {background: red;} .myClass2 {background: blue;} function replace_Class() { var e = document.getElementById('Btn'); e.classList.replace('myClass1', 'myClass2'); } I koden ovan, när användaren klickar på knappen, ersätts de befintliga klassegenskaperna med de nya klassegenskaperna. Utgången efter att ha klickat på knappen visas nedan:
oföränderlig lista
classList.item()
Funktionen item() används för att returnera namnet på klassen som finns vid det angivna indexvärdet.
Nedan är ett exempel som får oss att förstå hur man använder metoden item() för att returnera värdet:
Exempel:
<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)); } I koden, när användaren klickar på knappen, kommer klassen som finns på det angivna indexet att visas. Efter att ha klickat på knappen får vi det angivna indexklassvärdet, som visas nedan:
Det här är några av metoderna för classList DOM-objektet och allt om classList.