classlist javascript | Spiegato

Una funzione DOM JavaScript chiamata "classlist"Può essere utilizzato per modellare le classi CSS di un elemento. È una proprietà JavaScript di sola lettura che viene utilizzata per rappresentare le informazioni incluse nella proprietà di classe di un elemento. Più specificamente, i nomi delle classi CSS vengono restituiti dalla ClassList chiamata Class.

Questo articolo illustrerà la proprietà JavaScript di classe e i suoi usi in JavaScript.

Cos'è la classlist in javascript?

IL "classlist"È l'attributo JavaScript DOM di sola lettura che rappresenta i dati nella proprietà della classe di un elemento. Fornisce i nomi delle classi CSS come output. Nonostante sia di sola lettura, la classifica può ancora essere usata per cambiare le classi. Inoltre, è possibile modificare le classi CSS fornite a un elemento HTML usando l'oggetto classlist.

Sintassi

Segui la sintassi data per utilizzare l'attributo classlist:

elemento.classi di classe;

Qui, il "elemento"È l'elemento HTML.

Esempio

In questo esempio, creeremo un pulsante assegnando una classe denominata "pulsante"E allega l'evento OnClick () che emetterà i nomi della classe assegnata al pulsante quando attivato:

Fare clic per mostrare la classe assegnata al pulsante

Clicca qui

Ora imposteremo il raggio del bordo del pulsante come "2 cm"Nel file CSS:

.Button
raggio di confine: 2 cm;

Colletteremo il foglio di stile con il file HTML usando ""Tag:

Nel file JavaScript, definisci una funzione "ButtonClick ()"In modo tale che quando viene invocato, in primo luogo, il documento.GetElementById () pulsante di accesso al metodo utilizzando il suo ID e quindi visualizzare la classe assegnata al pulsante in un metodo Alert ():

Funzione ButtonClick ()
var click = documento.getElementById ("BTN");
Avviso (clicca.elist di classe);

Produzione

Dai un'occhiata ai metodi della proprietà JavaScript della classe.

Quali sono i metodi della proprietà della classe?

Esistono alcuni metodi di proprietà della lista di classe sono i seguenti:

• aggiungere()
• rimuovere()
• attivare ()
• contiene ()
• articolo()
• sostituire()

La tabella seguente comprende la descrizione dei metodi menzionati:

Metodi	Descrizione
aggiungere()	Puoi aggiungere una o più classi a un elemento con il metodo Add ().
rimuovere()	Per eliminare le classi dall'elenco delle classi dell'elemento, utilizzare il metodo Rimovi ().
attivare ()	Attivazione di interruzione dei nomi di classe particolare di un elemento utilizzando il metodo Toggle (). La classe specificata viene aggiunta con un clic e la classe viene rimossa con un altro clic.
contiene ()	Per verificare se la classe data esiste nell'elemento o meno, utilizzare il metodo contenere ().
articolo()	Viene utilizzato per mostrare i nomi delle classi presenti all'indice specifico.
sostituire()	Una classe esistente può essere sostituita con una nuova classe utilizzando il metodo Sostituta ().

Ora discuteremo alcuni metodi comunemente usati della classe.

Esempio 1: come utilizzare il metodo add () di proprietà della classlist?

Aggiungeremo nuove classi nel pulsante facendo clic sul nuovo "Aggiungi la classe al pulsante":

Aggiungi la classe al pulsante

Quindi, crea due classi "BtnColor" E "testo grassetto"Ciò aggiungerà il colore di sfondo dei pulsanti e in grassetto il testo del pulsante:

.btncolor
Background-color: Blueviolet;

.testo grassetto
Font-weight: audace;

Nel file JavaScript, definisce una funzione denominata "addClass ()"Che chiamerà il"aggiungere()"Metodo della classi di classe con il nome della classe come argomento aggiunto nella classe del pulsante:

funzione addClass ()
var newclass = document.getElementById ("BTN").classi di classe;
Newclass.Aggiungi ("BtnColor");
Newclass.Aggiungi ("BoldText");

L'output indica che le nuove classi vengono aggiunte nel pulsante "Clicca qui" Quando "Aggiungi la classe al pulsante"Viene cliccato. Quindi, fai clic su "Clicca qui"Pulsante per visualizzare l'elenco delle classi:

Esempio 2: come utilizzare il metodo Rimuovi () di proprietà della classe?

Ora rimuoveremo una lezione dall'elenco. Per farlo, creeremo un nuovo pulsante "Rimuovi la classe dal pulsante"E allega un evento OnClick () con esso:

Rimuovi la classe dal pulsante

Definiremo una funzione "removeClass ()"Nel file JavaScript per rimuovere la classe"BtnColor"Dall'elenco delle classi:

funzione removeClass ()
var newclass = document.getElementById ("BTN").classi di classe;
Newclass.rimuovere ("btnColor");

Come puoi vedere nell'output, il "Clicca qui"Pulsante visualizzato una classe denominata"pulsante"E poi quando il"Aggiungi la classe al pulsante"Si fa clic, due nuove classi"testo grassetto" E "BtnColor"Vengono aggiunti all'elenco e anche il colore di sfondo del pulsante. Infine, facendo clic su "Rimuovi la classe dal pulsante"Rimuoverà il"BtnColor"Classe dall'elenco:

Esempio 3: come utilizzare il metodo toggle () di proprietà della classlist?

Ora useremo il metodo Toggle () per attivare l'elenco delle classi su un clic e rimuoremo su un altro clic:

Interruttore

Nel file JavaScript, definisci una funzione "toggleClass ()"Ciò aggiungerà prima il colore del pulsante su un clic e quindi lo rimuoverà sull'altro:

funzione toggleClass ()
var newclass = document.getElementById ("BTN").classi di classe;
Newclass.toggle ("btnColor");

L'output corrispondente è il seguente:

Sono state coperte tutte le linee guida fondamentali per la proprietà di JavaScript della classe.

Conclusione

IL "classlist"È l'attributo di sola lettura di JavaScript che fornisce i nomi delle classi CSS assegnate all'elemento HTML. Permette di modificare le classi CSS con l'aiuto dei suoi metodi predefiniti, tra cui ADD (), Rimuovi (), Toggle () e così via. In questo articolo, abbiamo illustrato la proprietà JavaScript di classe e i suoi metodi con esempi dettagliati.