Kā mainīt HTML elementa klasi, izmantojot JavaScript?

Tīmekļa lapas vai vietnes izstrādes posmā ir noteiktas situācijas, kad atjauninājumu dēļ jums vairs nav jāpiekļūst dažiem konkrētiem elementiem. Turklāt, ja ir nepieciešams piešķirt vairāk nekā vienu klasi noteiktam html elementam. Šādos gadījumos HTML elementa klases maiņa JavaScript ir lielisks palīgs, lai risinātu šādas situācijas.

Šajā emuārā tiks parādītas pieejas, kas jāņem vērā, mainot HTML elementa klasi JavaScript.

Kā mainīt HTML elementa klasi, izmantojot JavaScript?

Lai mainītu HTML elementa klasi, izmantojot JavaScript, var izmantot šādas pieejas:

• • ' klasesNosaukums ” īpašums.
  • ' klases saraksts ” īpašums.

1. pieeja: mainiet HTML elementa klasi, izmantojot JavaScript, izmantojot rekvizītu className

Šī pieeja var stāties spēkā, piekļūstot izveidotajai klasei, kas saistīta ar elementu, un piešķirot tai citu klasi.

Nākamais piemērs parāda norādīto koncepciju.

Piemērs

Tālāk norādītajā kodā sadaļā “ ', iekļaujiet šādu virsrakstu sadaļā '

” tagu. Pēc tam izveidojiet norādīto pogu, kurai tiks piešķirta noklusējuma ' klasē ”, kas vēlāk tiks mainīts kodā. Piešķiriet tai arī “ id ” un pievienots „ onclick ” notikums, kas izsauc funkciju Class().

Vēlāk kodā iekļaujiet šo ziņojumu laukā “

” tagu, lai to parādītu DOM pēc klases pārveidošanas:

HTML kods:

< ķermenis stils = 'text-align: center;' >
< h2 > Mainīt elementu klases nosaukums

Vecais klases nosaukums ir: noklusējuma klase

JS kodā deklarējiet funkciju ar nosaukumu ' Klase () ”. Šeit piekļūstiet noklusējuma klasei pēc tās ID, izmantojot ' document.getElementById() ” metode. ' klasesNosaukums ' rekvizīts pārveidos izveidoto klasi par klasi ar nosaukumu ' jauna klase ”.

Visbeidzot, ' iekšējaisTeksts ” rekvizīts parādīs šādu ziņojumu kopā ar mainīto klasi:

JS kods:

Izvade

Iepriekš redzamajā izvadā ievērojiet izmaiņas ' klasē ” labajā pusē, noklikšķinot uz pogas DOM.

2. pieeja: mainiet HTML elementa klasi, izmantojot JavaScript, izmantojot rekvizītu classList

Šo konkrēto pieeju var ieviest, lai noņemtu norādīto klasi un piešķirtu tai jaunu klasi, tādējādi mainot to.

Piemērs

Pirmkārt, atkārtojiet iepriekš aprakstītās metodes, lai iekļautu virsrakstu, izveidotu pogu ar piešķirto klasi, ID un pievienoto onclick notikumu, kas izsauc norādīto funkciju. Pēc tam līdzīgi pievienojiet virsraksta sadaļu '

” tagu, lai informētu lietotāju par mainīto klasi, noklikšķinot uz pogas:

HTML kods

< ķermenis stils = 'text-align: center;' >
< h2 > Mainiet elementa klasi ! h2 >
< pogu klasē = 'Tīmekļa vietne' onclick = 'Klase()' id = 'mainīt' > Noklikšķiniet uz Es pogu >
< h3 id = 'galva' stils = 'fona krāsa: gaiši pelēka;' > Vecais klases nosaukums ir: Vietne h3 >
ķermenis >

Tagad deklarējiet funkciju ar nosaukumu ' Klase () ”. Tās definīcijā piemēro ' klases saraksts ' īpašums kopā ar ' noņemt () ' metodi, lai izlaistu piekļuvi klasei ar nosaukumu ' Tīmekļa vietne ”, kas atbilst izveidotajai pogai.

Nākamajā darbībā piešķiriet tai pašai klasei jaunu klasi, izmantojot apspriesto rekvizītu ar “ pievienot () ” metode. Visbeidzot, parādiet mainīto klasi, kā aprakstīts iepriekšējā pieejā:

JS kods

funkciju Klase ( ) {
document.getElementById ( 'mainīt' ) .classList.remove ( 'Tīmekļa vietne' )
document.getElementById ( 'mainīt' ) .classList.add ( 'Linux' ) ;
var access = document.getElementById ( 'mainīt' ) .classList;
document.getElementById ( 'galva' ) .innerHTML = 'Jaunais klases nosaukums ir: + piekļuve;
}

Izvade

Šis raksts bija paredzēts, lai notīrītu jēdzienu mainīt HTML elementa klasi, izmantojot JavaScript.

Secinājums

' klasesNosaukums ' un ' klases saraksts ” rekvizītus var izmantot, lai mainītu HTML elementa klasi. Rekvizīts className nodrošināja ātrāku pieeju vēlamās prasības izpildei, salīdzinot ar rekvizītu classList, jo tas bija saistīts ar mazāku koda sarežģītību. No otras puses, rekvizīts classList mainīja noklusējuma klasi, izmantojot papildu divas metodes. Šis raksts ilustrē pieejas, kā mainīt HTML elementa klasi, izmantojot JavaScript.