Come aggiungere la classe attiva in JavaScript

Durante lo sviluppo di un sito Web, a volte il tuo codice diventa così lungo e complesso che non è possibile aggiungere o rimuovere ID o classi CSS individualmente. Per affrontare tali situazioni, è possibile utilizzare JavaScript per aggiungere classi attive per lo styling o per soddisfare altri scopi. JavaScript fornisce metodi diversi per risolvere immediatamente il problema complesso dichiarato.

Questo manuale spiegherà la procedura di aggiunta di una classe attiva in JavaScript.

Come aggiungere la classe attiva in JavaScript?

Per aggiungere una classe attiva, useremo i seguenti metodi:

• documento.getElementById ()
• documento.QuerySelector ()

Andiamo al primo metodo!

Metodo 1: usa il documento.getElementById () con classList.Metodo ADD () per aggiungere la classe attiva in JavaScript

In JavaScript, il "documento.getElementById ()"Il metodo viene utilizzato per accedere a un determinato elemento dal suo ID. Tuttavia, seleziona solo gli elementi in base ai loro ID, non alle classi. Puoi usarlo con il "classlist.aggiungere()"Metodo per l'aggiunta di una classe attiva in JavaScript.

Esploriamo questo metodo prendendo un esempio.

Esempio

Nel nostro file HTML, prenderemo il "

"Tag con un po 'di testo, specifica il suo ID come"TXT", E aggiungi un"al clic"Evento che attiverà il"attivare()" funzione. Nota che, aggiungi il

Tag all'interno del tag:

Tocca qui

Nel file JavaScript, definisci la funzione Activate () in modo tale da accedere prima all'elemento di paragrafo utilizzando il suo ID nel documento.metodo getElementById (). Quindi, aggiungi una classe CSS all'elenco delle classi per scopi di styling:

funzione attivate ()
var a = documento.getElementById ("txt");
UN.classlist.Aggiungi ("Newclass");

Nel file CSS, posizionare un punto prima "Newclass"E assegnare il"colore di sfondo"Proprietà un valore"arancia":

.newclass
Background-color: Orange;

Di conseguenza, quando si fa clic sull'elemento paragrafo, la proprietà in background aggiunta verrà applicata ad esso:

Diamo un'occhiata al seguente metodo in cui useremo il documento.QuerySelector () per aggiungere una classe attiva.

Metodo 2: usa il documento.QuerySelector () con classList.Metodo ADD () per aggiungere la classe attiva in JavaScript

In JavaScript, il "documento.QuerySelector ()"Il metodo viene utilizzato per ottenere il primo elemento dal codice. È possibile specificare classi e ID entrambi all'interno del metodo QuerySelector (). Può essere usato con il “classlist.aggiungere()"Metodo per l'aggiunta di una classe attiva in JavaScript.

Esempio

Ora useremo solo il "documento.QuerySelector ()"Con ID"#TXT"Per selezionare l'elemento paragrafo. Ancora una volta, la lista di classe.Il metodo Add () verrà utilizzato per aggiungere l'attivo "Newclass":

funzione attivate ()
var a = documento.QuerySelector ("#txt");
UN.classlist.Aggiungi ("Newclass");

Produzione

Abbiamo imparato due metodi più semplici per aggiungere classe attiva in JavaScript

Conclusione

Per aggiungere una classe attiva, possiamo utilizzare il "getElementById ()" O "QuerySelector ()"Con la classifica.Metodo ADD (). Entrambi i metodi menzionati ottengono prima elementi dal loro ID, quindi usando ClassList.Metodo ADD (), il nuovo nome di classe assegnato all'elemento che può essere utilizzato per scopi di styling. Questo post ha descritto la procedura relativa all'aggiunta di una classe attiva in JavaScript.