JavaScript classList è una proprietà DOM di JavaScript che consente di definire lo stile delle classi CSS (Cascading Style Sheet) di un elemento. JavaScript classList è una proprietà di sola lettura che restituisce i nomi delle classi CSS. È una proprietà di JavaScript rispetto alle altre proprietà di JavaScript che includono style e className. La proprietà style restituisce il colore o altro stile dell'elemento della classe CSS e className viene utilizzata per restituire i nomi delle classi utilizzate nel file CSS. Tuttavia, le proprietà className e classList restituiscono il nome delle classi che abbiamo utilizzato nel file CSS ma in modi diversi. La proprietà className restituisce il nome delle classi sotto forma di stringa, mentre la proprietà classList of JavaScript restituisce il nome delle classi sotto forma di array.
Qui, faremo una breve discussione su JavaScript classList e discuteremo anche i suoi metodi con le loro implementazioni pratiche.
Esempio di proprietà classList JavaScript
Di seguito è riportato un esempio della proprietà JavaScript classList attraverso la quale otterremo il valore della classe di un elemento.
<h3>Click on the button to get the class value </h3><br> function getClass() { var e = document.getElementById('btn'); alert(e.classList); } L'output del codice precedente è mostrato di seguito:
Proprietà classList JavaScript
La proprietà classList viene utilizzata per rappresentare il valore degli elementi della classe che è a DOMTokenList oggetto. È una proprietà di sola lettura ma possiamo modificarne il valore manipolando le classi utilizzate nel programma. La proprietà JavaScript classList è composta dai seguenti metodi attraverso i quali possiamo eseguire diverse operazioni sugli elementi della classe:
Questi sono alcuni dei metodi utilizzati nel classList JavaScript.
Discuteremo uno per uno.
listaclasse.add()
La funzione utilizzata per aggiungere una o più classi all'elemento CSS.
Esempio:
L'esempio seguente mostra come aggiungere una classe utilizzando il metodo 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'); } Nel codice, quando l'utente fa clic sul pulsante, la nuova classe viene aggiunta alle classi esistenti. L'output dopo aver fatto clic sul pulsante è mostrato di seguito:
listaclasse.remove()
La funzione rimuovi() viene utilizzata per rimuovere le classi esistenti dagli elementi.
modelli di programmazione java
L'esempio seguente mostra come rimuovere una o più classi utilizzando il metodo 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'); } Nel codice precedente, quando l'utente fa clic sul pulsante, la classe specificata viene rimossa dalle classi CSS esistenti. L'output dopo aver fatto clic sul pulsante è mostrato di seguito:
Classlist.toggle()
Il pulsante toggle() viene utilizzato per alternare le classi nell'elemento. Significa aggiungere una nuova classe o rimuovere le classi esistenti.
Di seguito è riportato un esempio che ci farà capire come utilizzare il metodo toggle() per aggiungere o rimuovere classi.
stringa di input Java
Esempio:
.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'); } Nel codice, quando l'utente fa clic sul pulsante, la classe verrà aggiunta o rimossa dalle classi CSS. L'output dopo aver fatto clic sul pulsante è mostrato di seguito:
Classlist.contains()
Il metodo contiene() viene utilizzato per verificare se la classe specificata esiste nelle classi CSS e rispetto ad essa restituisce il valore booleano come vero o falso.
Di seguito è riportato un esempio che mostra come cercare una classe se esiste o meno utilizzando il metodo contiene():
Esempio:
function getClass() { var e = document.getElementById('Btn'); document.write(e.classList.contains('myClass')+' <br>'+'myclass is the name of the class'); } Nel codice sopra, si vede che quando l'utente fa clic sul pulsante, controlla la classe specificata se presente nelle classi CSS. Se è presente, verrà restituito un valore booleano come vero. Altrimenti, restituirà false. L'output del codice sopra dopo aver fatto clic sul pulsante è mostrato di seguito:
classlist.sostituisci()
Il metodo replace() viene utilizzato per sostituire una classe esistente con una nuova. Ciò non significa che la classe viene rimossa dagli elementi ma le proprietà della classe esistente vengono sostituite con le proprietà della nuova classe.
Di seguito è riportato un esempio attraverso il quale capiremo come possiamo sostituire una classe esistente con una nuova classe:
Esempio:
.myClass1 {background: red;} .myClass2 {background: blue;} function replace_Class() { var e = document.getElementById('Btn'); e.classList.replace('myClass1', 'myClass2'); } Nel codice precedente, quando l'utente fa clic sul pulsante, le proprietà della classe esistenti vengono sostituite con le nuove proprietà della classe. L'output dopo aver fatto clic sul pulsante è mostrato di seguito:
listaclasse.elemento()
La funzione item() viene utilizzata per restituire il nome della classe presente nel valore di indice specificato.
Di seguito è riportato un esempio che ci farà capire come utilizzare il metodo item() per restituire il valore:
Esempio:
<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)); } Nel codice, quando l'utente clicca sul pulsante, verrà visualizzata la classe presente nell'indice specificato. Dopo aver fatto clic sul pulsante, otteniamo il valore della classe di indice specificata, come mostrato di seguito:
Questi sono alcuni dei metodi dell'oggetto DOM classList e tutto su classList.