Kaip pakeisti HTML elemento klasę naudojant „JavaScript“?

Tinklalapio ar svetainės kūrimo etape yra tam tikrų situacijų, kai jums nebereikia pasiekti tam tikrų elementų dėl kai kurių atnaujinimų. Be to, kai reikia priskirti daugiau nei vieną klasę konkrečiam html elementui. Tokiais atvejais HTML elemento klasės pakeitimas „JavaScript“ yra labai naudingas norint išspręsti tokias situacijas.

Šiame tinklaraštyje bus parodyti būdai, į kuriuos reikia atsižvelgti keičiant HTML elemento klasę „JavaScript“.

Kaip pakeisti HTML elemento klasę naudojant „JavaScript“?

Norint pakeisti HTML elemento klasę su JavaScript, galima taikyti šiuos metodus:

• • “ klasės pavadinimas ' nuosavybė.
  • “ klasių sąrašas ' nuosavybė.

1 metodas: pakeiskite HTML elemento klasę naudodami „JavaScript“, naudodami ypatybę className

Šis metodas gali įsigalioti prisijungus prie sukurtos klasės, susietos su elementu, ir priskiriant jai kitą klasę.

Toliau pateiktame pavyzdyje parodyta nurodyta koncepcija.

Pavyzdys

Žemiau pateiktame kode, esančiame „ “, įtraukite šią antraštę į „

“ žymą. Po to sukurkite nurodytą mygtuką, kuriam bus priskirtas numatytasis ' klasė “, kuris vėliau bus pakeistas kode. Taip pat priskirkite jam „ id “ ir pridedamas „ paspaudus ” įvykis, iškviečiantis funkciją Class().

Vėliau į kodą įtraukite šį pranešimą į „

“ žymą, kad ji būtų rodoma DOM keičiant klasę:

HTML kodas:

< kūnas stilius = 'teksto lygiavimas: centre;' >
< h2 > Keisti elementą klasės pavadinimas

Senas klasės pavadinimas yra: numatytoji klasė

JS kode deklaruokite funkciją pavadinimu „ Klasė() “. Čia pasiekite numatytąją klasę pagal jos ID naudodami „ document.getElementById() “ metodas. „ klasės pavadinimas ' ypatybė pakeis sukurtą klasę į klasę pavadinimu ' nauja klasė “.

Galiausiai „ vidinisTekstas “ ypatybė kartu su pakeista klase parodys šį pranešimą:

JS kodas:

Išvestis

Aukščiau pateiktame išvestyje stebėkite „ klasė “ dešinėje, spustelėjus mygtuką DOM.

2 metodas: pakeiskite HTML elemento klasę naudodami „JavaScript“, naudodami „classList“ ypatybę

Šis konkretus metodas gali būti įgyvendintas norint pašalinti nurodytą klasę ir priskirti jai naują klasę, taip ją pakeičiant.

Pavyzdys

Pirmiausia pakartokite aukščiau aptartus metodus, kaip įtraukti antraštę, sukurti mygtuką su priskirta klase, ID ir pridedamą onclick įvykį, iškviečiantį nurodytą funkciją. Tada panašiai pridėkite antraštės skyrių „

“ žyma, kad praneštų vartotojui apie pakeistą klasę spustelėjus mygtuką:

HTML kodas

< kūnas stilius = 'teksto lygiavimas: centre;' >
< h2 > Keisti elemento klasę ! h2 >
< mygtuką klasė = 'Interneto svetainė' paspaudus = 'Klasė()' id = 'pakeisti' > Paspausk mane mygtuką >
< h3 id = 'galva' stilius = 'fono spalva: šviesiai pilka;' > Senas klasės pavadinimas yra: Svetainė h3 >
kūnas >

Dabar paskelbkite funkciją pavadinimu ' Klasė() “. Savo apibrėžime taikykite „ klasių sąrašas “ nuosavybė kartu su “ pašalinti () ' metodas praleisti pasiekiamą klasę pavadinimu ' Interneto svetainė “, kuris atitinka sukurtą mygtuką.

Kitame žingsnyje priskirkite naują klasę tai pačiai klasei naudodami aptartą ypatybę su „ papildyti() “ metodas. Galiausiai, parodykite pakeistą klasę, kaip aptarta ankstesniame požiūryje:

JS kodas

funkcija Klasė ( ) {
document.getElementById ( 'pakeisti' ) .classList.remove ( 'Interneto svetainė' )
document.getElementById ( 'pakeisti' ) .classList.add ( 'Linux' ) ;
var access = document.getElementById ( 'pakeisti' ) .classList;
document.getElementById ( 'galva' ) .innerHTML = 'Naujas klasės pavadinimas yra: ' + prieiga;
}

Išvestis

Šis užrašas skirtas išvalyti HTML elemento klasės keitimo naudojant „JavaScript“ idėją.

Išvada

„ klasės pavadinimas “ ir „ klasių sąrašas “ ypatybes galima naudoti norint pakeisti HTML elemento klasę. „ClassName“ ypatybė leido greičiau įvykdyti norimą reikalavimą, palyginti su ypatybe „classList“, nes buvo mažiau kodo sudėtingumo. Kita vertus, ypatybė classList pakeitė numatytąją klasę, naudodama du papildomus metodus. Šiame straipsnyje parodyta, kaip pakeisti HTML elemento klasę naudojant „JavaScript“.