Come aggiungere il nome di classe all'elemento HTML tramite JavaScript?

JavaScript fornisce un paio di approcci per l'aggiunta del nome della classe a un elemento HTML come il ".Aggiungi () "Metodo e il ".nome della classe" proprietà. Il nome della classe può essere aggiunto agli elementi utilizzando il foglio CSS (Cascading Style) e JavaScript. Lo scopo principale di aggiungere il nome della classe a un elemento HTML è ottenere diverse funzionalità sull'elemento selezionato usando il nome della classe specificato.

Gli approcci JavaScript di seguito possono essere utilizzati per aggiungere il nome della classe a un elemento HTML:

• Cosa è ".Aggiungi () "in JavaScript?
• Come fa il ".Aggiungi () "Metodo funzionare in javascript?
• Cosa è ".ClassName ”in JavaScript?
• Come fa il ".ClassName ”Proprietà Work in JavaScript?

Quindi iniziamo!

Cosa è ".Aggiungi () "in JavaScript?

".add () "è un metodo integrato della proprietà classlist che può essere utilizzato per aggiungere il nome di classe a qualsiasi elemento HTML specifico. Lo snippet di seguito ti permetterà di capire come usare il ".Aggiungi "Metodo in JavaScript:

elemento.classlist.add ("class_name");

Come fa il ".Aggiungi () "Metodo funzionare in javascript?

Questa sezione presenterà una guida passo-passo per capire come aggiungere il nome della classe a un elemento HTML usando JavaScript.

In questo programma creeremo tre file un file "HTML", un file "CSS" e un file "JavaScript":

Html

Come aggiungere il nome di classe all'elemento HTML tramite JavaScript?

Cliccami!

Facendo clic su "Fai clic su di me!"Il pulsante aggiungerà il nome della classe al seguente elemento P

Benvenuti in Linuxhint.com!!

Nel frammento di cui sopra abbiamo eseguito le seguenti funzionalità:

• Abbiamo utilizzato il

  Tag per aggiungere una voce.

• Successivamente, abbiamo utilizzato il tag per creare un pulsante e chiamato come "Fai clic su di me!".
• Ha invocato "classnamefun ()" ogni volta che l'utente ha fatto clic sul pulsante.
• Successivamente, abbiamo creato un

  elemento.

• Infine, abbiamo creato un paragrafo usando

  elemento e assegnato un ID "addclass".

CSS

.stile
Testo-align: centro;
Font in stile: corsivo;
Background-color: nero;
colore bianco;

Il file CSS serviva le seguenti funzioni:

• Allinea il testo al centro usando la proprietà "allineate text".
• Imposta lo stile del carattere in corsivo usando la proprietà "in stile font".
• Imposta il colore di sfondo nero usando la proprietà "color sfondo".
• Infine, imposta il colore del testo bianco usando la proprietà "Colore".

JavaScript

funzione classNameFun ()
Let para = document.getElementByID ("AddClass");
parà.classlist.Aggiungi ("stile");

IL .Il file JS o JavaScript ha servito le funzionalità di seguito elencate:

• Ha creato una funzione denominata "classnamefun ()".
• Utilizzato il metodo getElementById () per leggere/modificare un elemento HTML con un ID "addClass".
• Infine, utilizzato il metodo ADD per aggiungere il nome a

  elemento.

Produzione
Durante l'esecuzione riuscita del codice, inizialmente otterremo il seguente output:

Facendo clic su “Fare clic su di me!"Il pulsante genererà l'output di seguito:

Ecco come il ".Aggiungi () "Metodo funzionare in javascript.

Cosa è ".ClassName ”in JavaScript?

IL ".ClassName ”è una proprietà in JavaScript che imposta/restituisce gli attributi di classe di un elemento HTML. Può essere utilizzato per aggiungere/specificare il nome della classe a qualsiasi tag HTML.

Il seguente frammento mostrerà la sintassi di base del ".Proprietà ClassName ":

elemento.className = class_name;

Qui, "class_name" rappresenta il nome della classe. In caso di più classi, possiamo specificare il nome delle classi usando la sintassi separata da virgola.

Come fa il ".ClassName ”Proprietà Work in JavaScript?

Consideriamo il seguente esempio dato per ottenere la comprensione di base del ".Proprietà ClassName ".

Html

Come aggiungere il nome di classe all'elemento HTML tramite JavaScript?

Cliccami!

Facendo clic su "Fai clic su di me!"Il pulsante aggiungerà il nome della classe a questo elemento

La classe HTML ha eseguito le seguenti attività:

• Utilizzato il

  elemento per aggiungere una voce.

• Utilizzato tag per creare un pulsante e chiamato come "Fai clic su di me!".
• Ha invocato "classnamefun ()" ogni volta che l'utente ha fatto clic sul pulsante.
• Infine, ha creato un

  e lo ha assegnato un ID "addClass".

CSS

Il file CSS rimarrà lo stesso dell'esempio precedente.

JavaScript

funzione classNameFun ()
Let Helement = Document.getElementByID ("AddClass");
Element.className = "Style";

Nel file JavaScript, abbiamo utilizzato il getElementById () Metodo per leggere/modificare un elemento HTML con un ID ".AddClass ". Successivamente, abbiamo utilizzato il metodo ADD per aggiungere il nome al

elemento.

Produzione
Quando eseguiamo il programma di cui sopra, inizialmente, questo programma produrrà l'output di seguito:

Dopo aver fatto clic su "Fai clic su di me!"Pulsante, ClassNameFun () verrà invocato, di conseguenza, otterremo il seguente output:

L'output chiarisce che il nome della classe è stato aggiunto correttamente al

elemento.

Conclusione

In JavaScript, il ".metodo Add () "e".La proprietà ClassName ”viene utilizzata per aggiungere il nome della classe a qualsiasi elemento HTML. Questo articolo ha spiegato tutte le basi per l'aggiunta di nomi di classe a qualsiasi elemento HTML. Questo post ha spiegato come usare il ".metodo Add () "e".Proprietà ClassName "con l'aiuto di alcuni esempi adatti.