Nella fase di progettazione di una pagina web o di un sito web, ci sono alcune situazioni in cui non è più necessario accedere ad alcuni elementi particolari a causa di alcuni aggiornamenti. Inoltre, quando è necessario assegnare più di una classe a un elemento specifico in html. In tali scenari, cambiare la classe di un elemento HTML in JavaScript è di grande aiuto per soddisfare tali situazioni.
Questo blog illustrerà gli approcci da considerare durante la modifica della classe di un elemento HTML in JavaScript.
Come modificare la classe di un elemento HTML con JavaScript?
Per modificare la classe di un elemento HTML con JavaScript, è possibile applicare i seguenti approcci:
-
- “ nome della classe ' proprietà.
- “ elenco di classi ' proprietà.
Approccio 1: modificare la classe di un elemento HTML con JavaScript utilizzando la proprietà className
Questo approccio può entrare in vigore accedendo alla classe creata associata a un elemento e assegnandogli una classe diversa.
L'esempio seguente mostra il concetto affermato.
Esempio
Nel codice sotto indicato all'interno del '
Più avanti nel codice, includi il seguente messaggio nel ' ” per visualizzarlo sul DOM alla trasformazione della classe:
Codice HTML:
< corpo stile = 'text-align: center;' >< h2 > Cambia elemento il nome della classe
Il vecchio nome della classe è: classe predefinita
Nel codice JS, dichiara una funzione denominata ' Classe() ”. Qui, accedi alla classe predefinita tramite il suo ID usando ' document.getElementById() ' metodo. Il ' nome della classe ” la proprietà trasformerà la classe creata nella classe denominata “ newClass ”.
Infine, il “ testo interno La proprietà ” visualizzerà il seguente messaggio insieme alla classe modificata:
Codice JS:
funzione Classe ( ) {document.getElementById ( 'il mio pulsante' ) .className = 'nuova classe' ;
var access = document.getElementById ( 'il mio pulsante' ) .nome della classe;
document.getElementById ( 'testa' ) .innerHTML = 'Il nuovo nome della classe è: ' + accesso;
}
Produzione
Nell'output sopra, osservare il cambiamento di ' classe ” sulla destra dopo aver fatto clic sul pulsante in DOM.
Approccio 2: modificare la classe di un elemento HTML con JavaScript utilizzando la proprietà classList
Questo particolare approccio può essere implementato per rimuovere la classe specificata e assegnarle una nuova classe, modificandola in tal modo.
Esempio
In primo luogo, ripeti i metodi sopra discussi per includere un'intestazione, creando un pulsante con la classe assegnata, l'id e l'evento onclick allegato che invoca la funzione specificata. Quindi, allo stesso modo, aggiungi la sezione dell'intestazione nel ' ” per notificare all'utente la classe modificata al clic del pulsante:
Codice HTML
< corpo stile = 'text-align: center;' >< h2 > Cambia classe di elemento ! h2 >
< pulsante classe = 'Sito web' al clic = 'Classe()' id = 'modificare' > Cliccami pulsante >
< h3 id = 'testa' stile = 'colore di sfondo: grigio chiaro;' > Il vecchio nome della classe è: Sito web h3 >
corpo >
Ora, dichiara una funzione denominata ' Classe() ”. Nella sua definizione, applicare il “ elenco di classi ” proprietà insieme al “ rimuovere() ” metodo per omettere la classe a cui si accede denominata “ Sito web ” che corrisponde al pulsante creato.
Nel passaggio successivo, assegna una nuova classe alla stessa classe utilizzando la proprietà discussa con ' Inserisci() ' metodo. Infine, mostra la classe modificata come discusso nell'approccio precedente:
Codice JS
funzione Classe ( ) {document.getElementById ( 'modificare' ) .elenco.classi.rimuovi ( 'Sito web' )
document.getElementById ( 'modificare' ) .classElenco.aggiungi ( 'Linux' ) ;
var access = document.getElementById ( 'modificare' ) .elenco di classi;
document.getElementById ( 'testa' ) .innerHTML = 'Il nuovo nome della classe è: ' + accesso;
}
Produzione
Questo articolo intendeva chiarire il concetto di modificare la classe dell'elemento HTML usando JavaScript.
Conclusione
Il ' nome della classe ' e ' elenco di classi Le proprietà ” possono essere utilizzate per modificare la classe di un elemento HTML. La proprietà className ha portato a un approccio più rapido nell'esecuzione del requisito desiderato rispetto alla proprietà classList poiché comportava una minore complessità del codice. La proprietà classList, d'altra parte, ha modificato la classe predefinita con l'aiuto di due metodi aggiuntivi. Questo articolo ha illustrato gli approcci per modificare la classe dell'elemento HTML con JavaScript.