Come cambiare la classe di un elemento HTML con JavaScript?
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 casi scenari, cambiare la classe di un elemento HTML in JavaScript è di grande aiuto per soddisfare tali situazioni.
Questo blog dimostrerà gli approcci da considerare mentre cambia la classe di un elemento HTML in JavaScript.
Come cambiare 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à.
- "classlist" 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 assegnandolo una classe diversa.
Il seguente esempio dimostra il concetto dichiarato.
Esempio
Nel codice di seguito donati all'interno del ""Tag, includi la seguente intestazione nel""Tag. Successivamente, crea il pulsante specificato che verrà assegnato un valore predefinito "classe"Che verrà modificato più avanti nel codice. Inoltre, assegnalo un "id"E un allegato"al clic"Evento che invoca la funzione di funzione ().
Più avanti nel codice, includi il seguente messaggio in " Codice HTML: Cambia il nome della classe dell'elemento Nome vecchio classe è: classe predefinita Finalmente il "testo interno"La proprietà visualizzerà il seguente messaggio insieme alla classe modificata: Codice JS: 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 assegnarla modificandola così. Esempio In primo luogo, ripeti i metodi discussi sopra per l'inclusione di un'intestazione, creando un pulsante con la classe assegnata, ID e evento OnClick allegato che invoca la funzione specificata. Successivamente, aggiungi allo stesso modo la sezione di intestazione in " Codice HTML Cambia classe di elemento! Nel passaggio successivo, assegnare una nuova classe alla stessa classe usando la proprietà discussa con "aggiungere()" metodo. Infine, visualizza la classe modificata come discusso nell'approccio precedente: Codice js Conclusione IL "nome della classe" E "classlist"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 in quanto comportava una minore complessità del codice. La proprietà ClassList, d'altra parte, ha cambiato la classe predefinita con l'aiuto di due metodi aggiuntivi. Questo articolo ha illustrato gli approcci per cambiare la classe dell'elemento HTML con JavaScript.
Cliccami
Nel codice JS, dichiarare una funzione denominata "Classe()". Qui, accedi alla classe predefinita dal suo ID usando "documento.getElementById ()" metodo. IL "nome della classe"La proprietà trasformerà la classe creata in classe denominata"Newclass".function class ()
documento.getElementById ('myButton').className = "Newclass";
var access = documento.getElementById ('myButton').nome della classe;
documento.getElementById ('head').InnerHtml = "Nuovo nome di classe è:" + accesso;
Produzione
Nell'output sopra, osservare il cambiamento di "classe"A destra facendo clic sul pulsante in Dom.Nome vecchio classe è: sito web
Ora, dichiara una funzione chiamata "Classe()". Nella sua definizione, applica il "classlist"Proprietà insieme al"rimuovere()"Metodo per omettere la classe accessibile denominata"Sito web"Che corrisponde al pulsante creato.function class ()
documento.getElementById ('Change').classlist.Rimuovi ("Sito Web")
documento.getElementById ('Change').classlist.Aggiungi ("LinuxHint");
var access = documento.getElementById ('Change').classi di classe;
documento.getElementById ('head').InnerHtml = "Nuovo nome di classe è:" + accesso;
Produzione
Questo articolo intendeva cancellare il concetto di cambiare la classe dell'elemento HTML usando JavaScript.