Kuidas muuta HTML-i elemendi klassi JavaScriptiga?

Veebilehe või veebisaidi kujundamise etapis on teatud olukordi, kus mõne uuenduse tõttu ei pea te enam teatud elementidele juurde pääsema. Veelgi enam, kui on vajadus määrata html-i konkreetsele elemendile rohkem kui üks klass. Sellistel juhtudel on HTML-i elemendi klassi muutmine JavaScriptis selliste olukordade lahendamisel suureks abiks.

See ajaveeb tutvustab lähenemisviise, mida tuleks kaaluda HTML-elemendi klassi muutmisel JavaScriptis.

Kuidas muuta HTML-i elemendi klassi JavaScriptiga?

HTML-elemendi klassi muutmiseks JavaScriptiga saab rakendada järgmisi lähenemisviise.

• • “ klassi nimi ” vara.
  • “ klassiloend ” vara.

1. lähenemisviis: muutke HTML-i elemendi klassi JavaScriptiga, kasutades atribuuti className

Seda lähenemist saab rakendada, kui pääsete juurde elemendiga seotud loodud klassile ja määrate sellele teise klassi.

Järgmine näide demonstreerib esitatud kontseptsiooni.

Näide

Allpool antud koodis jaotises ' ', lisage jaotisesse '

” silti. Pärast seda looge määratud nupp, millele määratakse vaikimisi ' klass ”, mida hiljem koodis muudetakse. Samuti määrake sellele ' id ” ja lisatud „ onclick ” sündmus, mis kutsub funktsiooni Class().

Lisage koodi hiljem järgmine sõnum

” silt selle kuvamiseks DOM-is klassi teisendamisel:

HTML kood:

< keha stiilis = 'text-align: center;' >
< h2 > Muuda elementi klassi nimi

Vana klassi nimi on: vaikeklass

JS-koodis deklareerige funktsioon nimega ' Klass() ”. Siin saate juurdepääsu vaikeklassile selle ID abil, kasutades ' document.getElementById() ” meetod. ' klassi nimi atribuut ” muudab loodud klassi klassiks nimega “ uus klass ”.

Lõpuks ' sisemine Tekst ” atribuut kuvab koos muudetud klassiga järgmise teate:

JS kood:

Väljund

Ülaltoodud väljundis jälgige ' klass ” paremal, kui klõpsate nuppu DOM-is.

2. lähenemisviis: muutke HTML-i elemendi klassi JavaScriptiga, kasutades atribuuti classList

Seda konkreetset lähenemisviisi saab rakendada määratud klassi eemaldamiseks ja sellele uue klassi määramiseks, muutes seda.

Näide

Esiteks korrake ülalkirjeldatud meetodeid pealkirja lisamiseks, nupu loomiseks määratud klassi, ID ja lisatud onclick sündmusega, mis kutsub esile määratud funktsiooni. Järgmisena lisage samamoodi pealkirja jaotis '

” silt, et teavitada kasutajat muudetud klassist nupu klõpsamisel:

HTML-kood

< keha stiilis = 'text-align: center;' >
< h2 > Muuda elemendi klassi ! h2 >
< nuppu klass = 'veebisait' onclick = 'Klass()' id = 'muutus' > Klõpsake Mina nuppu >
< h3 id = 'pea' stiilis = 'taustavärv: helehall;' > Vana klassi nimi on: Veebisait h3 >
keha >

Nüüd deklareerige funktsioon nimega ' Klass() ”. Selle määratluses rakendage ' klassiloend ' vara koos ' eemalda () ' meetod, et jätta välja juurdepääs klassi nimega ' Veebileht ”, mis vastab loodud nupule.

Järgmises etapis määrake samale klassile uus klass, kasutades arutatud atribuuti koos ' lisama() ” meetod. Lõpuks kuvage muudetud klass, nagu arutati eelmises lähenemisviisis:

JS kood

funktsiooni Klass ( ) {
document.getElementById ( 'muutus' ) .classList.remove ( 'veebisait' )
document.getElementById ( 'muutus' ) .classList.add ( 'Linux' ) ;
var access = document.getElementById ( 'muutus' ) .classList;
document.getElementById ( 'pea' ) .innerHTML = 'Uue klassi nimi on:' + juurdepääs;
}

Väljund

Selle kirjutise eesmärk oli selgeks teha HTML-elemendi klassi muutmise kontseptsioon JavaScripti abil.

Järeldus

' klassi nimi ” ja „ klassiloend ” atribuute saab kasutada HTML-elemendi klassi muutmiseks. Atribuut className viis soovitud nõude täitmiseni kiiremini, võrreldes atribuudiga classList, kuna see hõlmas vähem koodi keerukust. Atribuut classList aga muutis kahe täiendava meetodi abil vaikeklassi. See artikkel illustreeris lähenemisviise HTML-i elemendi klassi muutmiseks JavaScriptiga.