Kako spremeniti razred elementa HTML z JavaScriptom?

V fazi oblikovanja spletne strani ali spletnega mesta pride do določenih situacij, ko zaradi neke posodobitve ne potrebujete več dostopa do določenih elementov. Poleg tega, ko je treba določenemu elementu v html dodeliti več kot en razred. V takšnih primerih je spreminjanje razreda elementa HTML v JavaScriptu v veliko pomoč pri reševanju takšnih situacij.

Ta spletni dnevnik bo prikazal pristope, ki jih je treba upoštevati pri spreminjanju razreda elementa HTML v JavaScriptu.

Kako spremeniti razred elementa HTML z JavaScriptom?

Če želite spremeniti razred elementa HTML z JavaScriptom, lahko uporabite naslednje pristope:

• • “ className ” lastnina.
  • “ classList ” lastnina.

1. pristop: spremenite razred elementa HTML z JavaScriptom z uporabo lastnosti className

Ta pristop lahko začne veljati tako, da dostopate do ustvarjenega razreda, povezanega z elementom, in mu dodelite drug razred.

Naslednji primer prikazuje navedeni koncept.

Primer

V spodnji kodi znotraj » « vključite naslednji naslov v »

' oznaka. Po tem ustvarite določen gumb, ki mu bo dodeljen privzeti ' razred «, kar bo kasneje spremenjeno v kodi. Dodelite mu tudi » id « in priloženo » onclick ” dogodek, ki prikliče funkcijo Class().

Kasneje v kodo vključite naslednje sporočilo v »

” za prikaz v DOM ob transformaciji razreda:

HTML koda:

< telo stil = 'poravnava besedila: sredina;' >
< h2 > Spremeni element Ime razreda

Staro ime razreda je: privzeti razred

V kodi JS deklarirajte funkcijo z imenom ' Razred() ”. Tukaj dostopajte do privzetega razreda z njegovim ID-jem z uporabo ' document.getElementById() ” metoda. ' className ' bo ustvarjeni razred pretvoril v razred z imenom ' newClass ”.

Končno, ' innerText ” lastnost prikaže naslednje sporočilo skupaj s spremenjenim razredom:

Koda JS:

Izhod

V zgornjem izhodu opazujte spremembo » razred ” na desni po kliku gumba v DOM-u.

2. pristop: spremenite razred elementa HTML z JavaScriptom z uporabo lastnosti classList

Ta poseben pristop je mogoče uporabiti za odstranitev podanega razreda in mu dodeliti nov razred ter ga tako spremeniti.

Primer

Najprej ponovite zgoraj opisane metode za vključitev naslova, ustvarjanje gumba z dodeljenim razredom, ID-jem in priloženim dogodkom onclick, ki prikliče določeno funkcijo. Nato na podoben način dodajte razdelek z naslovom v »

” za obvestilo uporabnika o spremenjenem razredu ob kliku na gumb:

HTML koda

< telo stil = 'poravnava besedila: sredina;' >
< h2 > Spremenite razred elementa ! h2 >
< gumb razred = 'Spletna stran' onclick = 'Razred()' id = 'sprememba' > Kliknite Jaz gumb >
< h3 id = 'glava' stil = 'barva-ozadje: svetlosiva;' > Staro ime razreda je: Spletna stran h3 >
telo >

Zdaj deklarirajte funkcijo z imenom ' Razred() ”. V njegovi definiciji uporabite ' classList ' lastnina skupaj z ' Odstrani() ' metoda za izpuščanje dostopanega razreda z imenom ' Spletna stran «, ki ustreza ustvarjenemu gumbu.

V naslednjem koraku istemu razredu dodelite nov razred z uporabo obravnavane lastnosti z ' dodaj() ” metoda. Nazadnje prikažite spremenjeni razred, kot je opisano v prejšnjem pristopu:

Koda JS

funkcijo Razred ( ) {
document.getElementById ( 'sprememba' ) .classList.remove ( 'Spletna stran' )
document.getElementById ( 'sprememba' ) .classList.add ( 'Linux' ) ;
var access = document.getElementById ( 'sprememba' ) .classList;
document.getElementById ( 'glava' ) .innerHTML = 'Novo ime razreda je: ' + dostop;
}

Izhod

Ta zapis je bil namenjen razjasnitvi koncepta spreminjanja razreda elementa HTML z uporabo JavaScripta.

Zaključek

' className « in » classList ” lastnosti lahko uporabite za spreminjanje razreda elementa HTML. Lastnost className je vodila do hitrejšega pristopa pri izvajanju želene zahteve v primerjavi z lastnostjo classList, saj je vključevala manj zapletene kode. Lastnost classList pa je spremenila privzeti razred s pomočjo dodatnih dveh metod. Ta članek je ponazoril pristope k spreminjanju razreda elementa HTML z JavaScriptom.