Kuinka muuttaa HTML-elementin luokkaa JavaScriptillä?

Verkkosivun tai verkkosivuston suunnitteluvaiheessa on tiettyjä tilanteita, joissa sinun ei enää tarvitse käyttää tiettyjä elementtejä päivityksen vuoksi. Lisäksi, kun on tarpeen määrittää useampi kuin yksi luokka tietylle html:n elementille. Tällaisissa skenaarioissa HTML-elementin luokan muuttaminen JavaScriptissä on suuri apu tällaisissa tilanteissa.

Tämä blogi esittelee lähestymistapoja, jotka on otettava huomioon HTML-elementin luokan muuttamisessa JavaScriptissä.

Kuinka muuttaa HTML-elementin luokkaa JavaScriptillä?

Voit muuttaa HTML-elementin luokkaa JavaScriptillä käyttämällä seuraavia lähestymistapoja:

• • ' luokan nimi ” omaisuutta.
  • ' luokkaluettelo ” omaisuutta.

Lähestymistapa 1: Muuta HTML-elementin luokkaa JavaScriptillä käyttämällä className-ominaisuutta

Tämä lähestymistapa voi tulla voimaan käyttämällä elementtiin liittyvää luotua luokkaa ja määrittämällä sille eri luokka.

Seuraava esimerkki havainnollistaa esitettyä konseptia.

Esimerkki

Alla annetussa koodissa ' ' -tunnisteen, sisällytä seuraava otsikko '

' -tunniste. Luo sen jälkeen määritetty painike, jolle määritetään oletus' luokkaa ”, joka muuttuu myöhemmin koodissa. Anna sille myös ' id 'ja liitteenä' klikkaamalla ” tapahtuma, joka kutsuu funktion Class().

Sisällytä myöhemmin koodiin seuraava viesti '

' -tunniste näyttääksesi sen DOM:ssa luokan muunnoksen yhteydessä:

HTML-koodi:

< kehon tyyli = 'text-align: center;' >
< h2 > Muuta elementtiä luokan nimi

Vanha luokan nimi on: oletusluokka

Ilmoita JS-koodissa funktio nimeltä ' Luokka() ”. Tässä pääset oletusluokkaan sen tunnuksella käyttämällä ' document.getElementById() ”menetelmä. ' luokan nimi '-ominaisuus muuttaa luodun luokan luokaksi nimeltä ' uusi luokka ”.

Lopuksi ' sisäteksti ” -ominaisuus näyttää seuraavan viestin muuttuneen luokan kanssa:

JS-koodi:

Lähtö

Huomioi yllä olevassa lähdössä ' luokkaa ” oikealla, kun napsautat painiketta DOM:ssa.

Lähestymistapa 2: Muuta HTML-elementin luokkaa JavaScriptillä käyttämällä classList-ominaisuutta

Tämä erityinen lähestymistapa voidaan toteuttaa poistamaan määritetty luokka ja määrittämään sille uusi luokka ja siten muuttamaan sitä.

Esimerkki

Toista ensin edellä kuvatut menetelmät otsikon sisällyttämiseksi, painikkeen luomiseksi määritetyllä luokalla, tunnisteella ja liitteenä onclick-tapahtumalla, joka kutsuu määritetyn toiminnon. Lisää seuraavaksi samalla tavalla otsikkoosio '

” -tunniste ilmoittaaksesi käyttäjälle muuttuneesta luokasta painiketta napsauttamalla:

HTML-koodi

< kehon tyyli = 'text-align: center;' >
< h2 > Muuta elementtiluokkaa ! h2 >
< -painiketta luokkaa = 'Verkkosivusto' klikkaamalla = 'Luokka()' id = 'muuttaa' > Napsauta Minä -painiketta >
< h3 id = 'pää' tyyli = 'taustaväri: vaaleanharmaa;' > Luokan vanha nimi on: Verkkosivusto h3 >
kehon >

Ilmoita nyt funktio nimeltä ' Luokka() ”. Käytä sen määritelmässä ' luokkaluettelo ' kiinteistö yhdessä ' Poista() '-menetelmää ohittaaksesi käytetyn luokan nimeltä ' Verkkosivusto ', joka vastaa luotua painiketta.

Määritä seuraavassa vaiheessa uusi luokka samalle luokalle käyttämällä käsiteltyä ominaisuutta ' lisätä() ”menetelmä. Näytä lopuksi muuttunut luokka, kuten edellisessä lähestymistavassa käsiteltiin:

JS-koodi

toiminto Luokka ( ) {
document.getElementById ( 'muuttaa' ) .classList.remove ( 'Verkkosivusto' )
document.getElementById ( 'muuttaa' ) .classList.add ( 'Linux' ) ;
var access = document.getElementById ( 'muuttaa' ) .classList;
document.getElementById ( 'pää' ) .innerHTML = 'Uuden luokan nimi on:' + pääsy;
}

Lähtö

Tämän kirjoituksen tarkoituksena oli tyhjentää käsite HTML-elementin luokan muuttamisesta JavaScriptin avulla.

Johtopäätös

' luokan nimi ' ja ' luokkaluettelo ”-ominaisuuksia voidaan käyttää HTML-elementin luokan muuttamiseen. ClassName-ominaisuus johti nopeampaan lähestymistapaan halutun vaatimuksen suorittamisessa verrattuna classList-ominaisuuteen, koska se sisälsi vähemmän koodin monimutkaisuutta. ClassList-ominaisuus puolestaan ​​muutti oletusluokkaa kahden lisämenetelmän avulla. Tämä artikkeli havainnollistaa tapoja muuttaa HTML-elementin luokkaa JavaScriptillä.