JavaScript classList és una propietat DOM de JavaScript que permet dissenyar les classes CSS (Cascading Style Sheet) d'un element. JavaScript classList és una propietat de només lectura que retorna els noms de les classes CSS. És una propietat de JavaScript respecte a les altres propietats de JavaScript que inclou estil i className. La propietat style retorna el color o un altre estil de l'element de classe CSS, i className s'utilitza per retornar els noms de les classes utilitzades al fitxer CSS. Tanmateix, les propietats className i classList retornen el nom de les classes que hem utilitzat al fitxer CSS però de diferents maneres. La propietat className retorna el nom de les classes en forma de cadena, mentre que la propietat classList de JavaScript retorna el nom de les classes en forma de matriu.
Aquí, farem una breu discussió sobre JavaScript classList i també parlarem dels seus mètodes amb les seves implementacions pràctiques.
Exemple de propietat JavaScript classList
A continuació es mostra un exemple de propietat JavaScript classList mitjançant la qual obtindrem el valor de classe d'un element.
<h3>Click on the button to get the class value </h3><br> function getClass() { var e = document.getElementById('btn'); alert(e.classList); } La sortida del codi anterior es mostra a continuació:
llistat de java
Propietat de JavaScript classList
La propietat classList s'utilitza per representar el valor dels elements de classe que és a DOMTokenList objecte. És una propietat només de lectura però podem modificar-ne el valor manipulant les classes utilitzades al programa. La propietat JavaScript classList consta dels mètodes següents mitjançant els quals podem realitzar diferents operacions sobre els elements de la classe:
Aquests són alguns dels mètodes que s'utilitzen a JavaScript classList.
Debatrem un per un.
angle agut
classList.add()
La funció que s'utilitza per afegir una o més classes a l'element CSS.
Exemple:
L'exemple següent mostra com afegir una classe mitjançant el mètode 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'); } Al codi, quan l'usuari fa clic al botó, la nova classe s'afegeix amb les classes existents. La sortida després de fer clic al botó es mostra a continuació:
classList.remove()
La funció remove() s'utilitza per eliminar les classes existents dels elements.
L'exemple següent mostra com eliminar una o més classes mitjançant el mètode 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'); } Al codi anterior, quan l'usuari fa clic al botó, la classe especificada en particular s'elimina de les classes CSS existents. La sortida després de fer clic al botó es mostra a continuació:
Classlist.toggle()
El botó toggle() s'utilitza per canviar les classes a l'element. Significa afegir una nova classe o eliminar les classes existents.
A continuació es mostra un exemple que ens farà entendre com utilitzar el mètode toggle() per afegir o eliminar classes.
Exemple:
.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'); } Al codi, quan l'usuari faci clic al botó, la classe s'afegirà o s'eliminarà de les classes CSS. La sortida després de fer clic al botó es mostra a continuació:
dibuix de rectangle gimp
Classlist.contains()
El mètode contains() s'utilitza per comprovar si la classe especificada existeix a les classes CSS i, respecte a ella, retorna el valor booleà com a vertader o fals.
A continuació es mostra un exemple que mostra com cercar una classe si existeix o no utilitzant el mètode contains():
convertir cadena en enumeració
Exemple:
function getClass() { var e = document.getElementById('Btn'); document.write(e.classList.contains('myClass')+' <br>'+'myclass is the name of the class'); } En el codi anterior, es veu que quan l'usuari fa clic al botó, comprova la classe especificada si està present a les classes CSS. Si està present, es retornarà un valor booleà com a true. En cas contrari, tornarà fals. La sortida del codi anterior després de fer clic al botó es mostra a continuació:
classlist.replace()
El mètode replace() s'utilitza per substituir una classe existent per una de nova. No vol dir que la classe s'elimini dels elements, sinó que les propietats de la classe existent es substitueixen per les propietats de la nova classe.
A continuació es mostra un exemple a través del qual entendrem com podem substituir una classe existent per una nova:
Exemple:
.myClass1 {background: red;} .myClass2 {background: blue;} function replace_Class() { var e = document.getElementById('Btn'); e.classList.replace('myClass1', 'myClass2'); } Al codi anterior, quan l'usuari fa clic al botó, les propietats de classe existents es substitueixen per les noves propietats de classe. La sortida després de fer clic al botó es mostra a continuació:
comparat en java
classList.item()
La funció item() s'utilitza per retornar el nom de la classe que està present al valor d'índex especificat.
A continuació es mostra un exemple que ens farà entendre com utilitzar el mètode item() per retornar el valor:
Exemple:
<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)); } Al codi, quan l'usuari faci clic al botó, es mostrarà la classe present a l'índex especificat. Després de fer clic al botó, obtenim el valor de classe d'índex especificat, tal com es mostra a continuació:
Aquests són alguns dels mètodes de l'objecte DOM classList i tot sobre classList.