Questo manuale spiegherà la procedura per aggiungere una classe attiva in JavaScript.
Come aggiungere una classe attiva in JavaScript?
Per aggiungere una classe attiva, utilizzeremo i seguenti metodi:
Passiamo al primo metodo!
Metodo 1: utilizzare document.getElementById() con il metodo classList.add() per aggiungere una classe attiva in JavaScript
In JavaScript, il ' document.getElementById() ” viene utilizzato per accedere a un determinato elemento tramite il suo id. Tuttavia, seleziona solo gli elementi in base ai loro ID, non alle classi. Puoi usarlo con il ' classList.aggiungi() ” metodo per aggiungere una classe attiva in JavaScript.
Esploriamo questo metodo facendo un esempio.
Esempio
Nel nostro file HTML, prenderemo il ' ” con del testo, specifica il suo id come “ testo ', e aggiungi un ' al clic ” evento che attiverà l'evento “ attivare() ' funzione. Nota che, aggiungi il tag
all'interno del tag
: < p id = 'testo' al clic = 'attivare()' > Tocca qui p >Nel file JavaScript, definisci la funzioneactivate() in modo che acceda prima all'elemento paragrafo usando il suo id nel metodo document.getElementbyId(). Quindi, aggiungi una classe CSS al suo elenco di classi per scopi di stile:
funzione attiva ( ) {
c'è un = documento. getElementById ( 'testo' ) ;
un. elenco di classi . Inserisci ( 'nuova classe' ) ;
}
Nel file CSS, posiziona un punto prima di ' nuova classe ” e assegnare il “ colore di sfondo ” proprietà un valore “ arancia ”:
. nuova classe {sfondo - colore : arancia ;
}
Di conseguenza, quando si fa clic sull'elemento paragrafo, gli verrà applicata la proprietà di sfondo aggiunta:
Diamo un'occhiata al metodo seguente in cui useremo document.querySelector() per aggiungere una classe attiva.
Metodo 2: utilizzare document.querySelector() con il metodo classList.add() per aggiungere una classe attiva in JavaScript
In JavaScript, il ' document.querySelector() Il metodo ” viene utilizzato per ottenere il primo elemento dal codice. È possibile specificare classi e ID sia all'interno del metodo querySelector(). Può essere utilizzato con il “ classList.aggiungi() ” metodo per aggiungere una classe attiva in JavaScript.
Esempio
Ora useremo solo il ' document.querySelector() ' con id ' #testo ” per selezionare l'elemento paragrafo. Anche in questo caso, il metodo classList.add() verrà utilizzato per aggiungere l'attivo ' nuova classe ”:
funzione attiva ( ) {c'è un = documento. querySelector ( '#testo' ) ;
un. elenco di classi . Inserisci ( 'nuova classe' ) ;
}
Produzione
Abbiamo imparato due metodi più semplici per aggiungere una classe attiva in JavaScript
Conclusione
Per aggiungere una classe attiva, possiamo utilizzare il ' getElementById() ' o ' querySelector() ” con il metodo classList.add(). Entrambi i metodi menzionati ottengono prima gli elementi in base al loro id, quindi utilizzando il metodo classList.add(), il nuovo nome di classe assegnato all'elemento che può essere utilizzato per scopi di stile. Questo post ha descritto la procedura relativa all'aggiunta di una classe attiva in JavaScript.