Come attivare la classe usando puro javascript in html?

Indipendenza a una classe utilizzando JavaScript puro in HTML è utile quando si desidera modificare l'aspetto di un elemento basato su una determinata condizione, come l'interazione dell'utente. Ad esempio, modificando il colore di sfondo della pagina o del pulsante sull'evento clicca. Per attivare una classe consente di apportare modifiche dinamicamente, senza dover aggiornare la pagina. Questo può aiutare ad aumentare l'esperienza dell'utente rendendo i cambiamenti più fluidi e reattivi.

Questo post illustrerà la procedura per attivare la classe usando JavaScript.

Come attivare la classe CSS usando puro JavaScript in HTML?

Per le classi di bordo trasparente che utilizzano JavaScript puro, utilizzare il “attivare ()Metodo del "classlist"Attributo/proprietà. Il metodo Toggle () accetta un nome di classe come parametro. Attivazione di una classe significa cambiare la presenza di una classe su un elemento in HTML. Implica il controllo se una classe è presente su un elemento e, se lo è, rimuoverla. Se la classe non è assegnata all'elemento, viene aggiunta.

Esempio 1: Modifica il colore dell'elemento mediante la classe a disattivazione utilizzando JavaScript puro in HTML
Nell'esempio seguente, cambieremo il colore di sfondo del pulsante sul pulsante Fare clic su Attivazione della classe.

Innanzitutto, crea un pulsante e assegna un ID "btn"Per modellare il pulsante. Attacca un "al clic"Evento su di esso che invocherà il"classtoggle ()"Funzione sul pulsante Clicca:

Pulsante

Nel file CSS, crea un ID "btn"Per lo styling del pulsante:

#btn
imbottitura: 3px;
Margine: 2px;
Font-Family: sans-serif;
raggio di confine: .5rem;

Crea una classe chiamata "giallo"Per impostare il colore di sfondo dell'elemento:

.giallo
Background-color: giallo;

Nel file JavaScript, definisci una funzione "classtoggle ()"Che chiamerà il"attivare ()Metodo del "classlist"Proprietà per la classe dei pulsanti alterni:

funzione classstoggle ()
documento.getElementById ("BTN").classlist.intervento ("giallo");

Come puoi vedere nell'output mentre fai clic sul pulsante, il colore di sfondo cambia, indica che "giallo"La classe è stata assegnata correttamente al pulsante usando"attivare ()Metodo del "classlist" proprietà:

Esempio 2: Modifica il carattere dell'elemento mediante la classe a disattiva
Nell'esempio dato, attiveremo la classe CSS per la modifica del testo sull'evento del clic del pulsante.

In un file HTML, crea un file

Tag per mostrare un po 'di testo e un pulsante. Assegna un ID "Benvenuto"Al testo che aiuta a ottenere il testo e assegnare una classe utilizzando il metodo a disattivazione:

Benvenuti in Linuxhint

Clic

Crea una classe CSS "testo"Ciò cambierà il colore e la dimensione del carattere del testo:

.testo
Font-size: 30px;
Colore: #06B5F5;

Definire una funzione "classtoggle ()"Per assegnare la classe"testo" al

Elemento tag sul pulsante Click che verrà recuperato utilizzando l'ID assegnato con l'aiuto di "getElementById ()" metodo.

funzione classstoggle ()
documento.getElementById ("Welcome").classlist.toggle ("testo");

Si può vedere che il "testo"La classe è assegnata al testo dato facendo clic sul pulsante:

Abbiamo fornito tutte le istruzioni essenziali pertinenti per attivare la classe utilizzando JavaScript puro in HTML.

Conclusione

Per attivare la classe utilizzando JavaScript puro in HTML, usa il “attivare ()Metodo del "classlist" proprietà. Aiuta ad assegnare una classe all'elemento se viene assegnata. Questo post ha illustrato la procedura per le classi di bordo utilizzando JavaScript.