Kako promijeniti klasu HTML elementa s JavaScriptom?

U fazi izrade web stranice ili web stranice postoje određene situacije u kojima više ne morate pristupati pojedinim elementima zbog nekog ažuriranja. Štoviše, kada postoji potreba da se određenom elementu u html-u dodijeli više od jedne klase. U takvim slučajevima, promjena klase HTML elementa u JavaScriptu je od velike pomoći u rješavanju takvih situacija.

Ovaj će blog pokazati pristupe koje treba uzeti u obzir pri mijenjanju klase HTML elementa u JavaScriptu.

Kako promijeniti klasu HTML elementa s JavaScriptom?

Za promjenu klase HTML elementa s JavaScriptom mogu se primijeniti sljedeći pristupi:

• • “ naziv klase ” vlasništvo.
  • “ classList ” vlasništvo.

Pristup 1: Promijenite klasu HTML elementa s JavaScriptom koristeći svojstvo className

Ovaj pristup može stupiti na snagu pristupanjem stvorenoj klasi povezanoj s elementom i dodjeljivanjem druge klase.

Sljedeći primjer demonstrira navedeni koncept.

Primjer

U donjem kodu unutar ' ', uključite sljedeći naslov u '

” oznaka. Nakon toga kreirajte navedeni gumb kojem će biti dodijeljen zadani ' razreda ” što će se kasnije promijeniti u kodu. Također, dodijelite mu ' iskaznica ' i priloženi ' na klik ” događaj koji poziva funkciju Class().

Kasnije u kodu uključite sljedeću poruku u '

” za prikaz na DOM-u nakon transformacije klase:

HTML kôd:

< tijelo stil = 'poravnavanje teksta: centar;' >
< h2 > Promjena elementa Naziv klase

Stari naziv klase je: zadana klasa

U JS kodu deklarirajte funkciju pod nazivom ' klasa() ”. Ovdje pristupite zadanoj klasi prema njenom ID-u koristeći ' document.getElementById() ” metoda. ' naziv klase ” svojstvo će transformirati kreiranu klasu u klasu pod nazivom “ nova klasa ”.

Konačno, ' unutarnjiTekst ” svojstvo će prikazati sljedeću poruku zajedno s promijenjenom klasom:

JS kod:

Izlaz

U gornjem izlazu promatrajte promjenu ' razreda ” s desne strane nakon klika na gumb u DOM-u.

Pristup 2: Promijenite klasu HTML elementa s JavaScriptom pomoću svojstva classList

Ovaj određeni pristup može se implementirati da se ukloni određena klasa i dodijeli joj nova klasa čime se mijenja.

Primjer

Prvo, ponovite gore navedene metode za uključivanje naslova, stvaranje gumba s dodijeljenom klasom, ID-om i priloženim onclick događajem koji poziva navedenu funkciju. Zatim na sličan način dodajte odjeljak naslova u '

” za obavještavanje korisnika o promijenjenoj klasi nakon klika na gumb:

HTML kôd

< tijelo stil = 'poravnavanje teksta: centar;' >
< h2 > Promjena klase elementa ! h2 >
< dugme razreda = 'Web stranica' na klik = 'Razred()' iskaznica = 'promijeniti' > Kliknite Ja dugme >
< h3 iskaznica = 'glava' stil = 'boja-pozadine: svijetlosiva;' > Stari naziv klase je: Web stranica h3 >
tijelo >

Sada deklarirajte funkciju pod nazivom ' klasa() ”. U njegovoj definiciji primijenite ' classList ' svojstvo zajedno s ' ukloniti() ” metoda za izostavljanje klase kojoj se pristupa pod nazivom “ Web stranica ” što odgovara kreiranom gumbu.

U sljedećem koraku dodijelite novu klasu istoj klasi koristeći razmatrano svojstvo s ' dodati() ” metoda. Na kraju, prikažite promijenjenu klasu kao što je objašnjeno u prethodnom pristupu:

JS kod

funkcija Klasa ( ) {
document.getElementById ( 'promijeniti' ) .classList.remove ( 'Web stranica' )
document.getElementById ( 'promijeniti' ) .classList.add ( 'Linux' ) ;
var access = document.getElementById ( 'promijeniti' ) .classList;
document.getElementById ( 'glava' ) .unutarnjiHTML = 'Novo ime klase je: ' + pristup;
}

Izlaz

Ovaj zapis je trebao razjasniti koncept promjene klase HTML elementa pomoću JavaScripta.

Zaključak

' naziv klase ' i ' classList ” svojstva se mogu koristiti za promjenu klase HTML elementa. Svojstvo className dovelo je do bržeg pristupa u izvršavanju željenog zahtjeva u usporedbi sa svojstvom classList jer je uključivalo manju složenost koda. S druge strane, svojstvo classList promijenilo je zadanu klasu uz pomoć dodatne dvije metode. Ovaj članak ilustrira pristupe za promjenu klase HTML elementa s JavaScriptom.