L'attributo class può essere utilizzato nei CSS per eseguire alcune attività per gli elementi con il nome della classe corrispondente. In questo articolo, discuteremo come aggiungere una classe a un elemento utilizzando JavaScript. In JavaScript , esistono alcuni approcci per aggiungere una classe a un elemento. Possiamo usare il .nome della classe proprietà o il .aggiungere() metodo per aggiungere un nome di classe al particolare elemento.
Ora discutiamo degli approcci per aggiungere una classe a un elemento.
Utilizzando la proprietà .className
IL .nome della classe La proprietà imposta il nome della classe di un elemento. Questa proprietà può essere utilizzata per restituire il valore dell'attributo class di un elemento. Possiamo utilizzare questa proprietà per aggiungere una classe a un elemento HTML senza sostituire la sua classe esistente.
Per aggiungere più classi, dobbiamo separare il loro nome con uno spazio come 'classe1 classe2' .
Se una classe è già dichiarata per un elemento e dobbiamo aggiungere un nuovo nome di classe allo stesso elemento, allora dovrebbe essere dichiarato inserendo uno spazio prima di scrivere il nuovo nome di classe, altrimenti sovrascriverà il nome di classe esistente. Può essere scritto come segue:
document.getElementById('div1').className = ' newClass';
Nel codice sopra abbiamo inserito uno spazio prima nuovaClasse .
Sintassi
Di seguito viene fornita la sintassi comunemente utilizzata di questa proprietà per impostare o restituire il nome della classe.
Per impostare il nome della classe
element.className = class
Per restituire il nome della classe
element.className
L'esempio dell'utilizzo di .nome della classe la proprietà è data come segue.
Esempio: aggiunta del nome della classe
In questo esempio, stiamo utilizzando il file .nome della classe proprietà per aggiungere il 'per' class all'elemento paragrafo con id 'p1' . Stiamo applicando il CSS al paragrafo corrispondente utilizzando il nome della classe 'per' .
Dobbiamo fare clic sul dato Pulsante HTML 'Aggiungi classe' per vedere l'effetto.
add class name using JavaScript .para { font-size: 30px; background-color: yellow; color: blue; border: 2px dotted red; } <p id="p1"> Welcome to the javaTpoint.com </p> <p> Click the following button to see the effect. </p> Add Class function fun() { var a = document.getElementById('p1'); a.classList.add('para'); } Provalo adesso Produzione
Dopo aver fatto clic sul pulsante indicato, l'output sarà:
