Ako zmeniť triedu prvku HTML pomocou JavaScriptu?

Vo fáze navrhovania webovej stránky alebo webu existujú určité situácie, kedy už nepotrebujete pristupovať k niektorým konkrétnym prvkom kvôli nejakej aktualizácii. Navyše, keď je potrebné priradiť viac ako jednu triedu konkrétnemu prvku v html. V takýchto prípadoch je zmena triedy prvku HTML v JavaScripte veľkou pomocou pri riešení takýchto situácií.

Tento blog demonštruje prístupy, ktoré je potrebné zvážiť pri zmene triedy prvku HTML v JavaScripte.

Ako zmeniť triedu prvku HTML pomocou JavaScriptu?

Ak chcete zmeniť triedu prvku HTML pomocou JavaScriptu, môžete použiť nasledujúce prístupy:

• • “ className ' nehnuteľnosť.
  • “ classList ' nehnuteľnosť.

Prístup 1: Zmeňte triedu prvku HTML pomocou JavaScriptu pomocou vlastnosti className

Tento prístup môže nadobudnúť účinnosť prístupom k vytvorenej triede spojenej s prvkom a priradením inej triedy.

Nasledujúci príklad demonštruje uvedený koncept.

Príklad

V nižšie uvedenom kóde v rámci „ “, zahrňte nasledujúci nadpis do „

” tag. Potom vytvorte zadané tlačidlo, ktorému bude priradené predvolené „ trieda “, ktorý sa neskôr v kóde zmení. Priraďte mu tiež „ id “ a priložený „ po kliknutí ” udalosť vyvolávajúca funkciu Class().

Neskôr v kóde zahrňte nasledujúcu správu do „

” na zobrazenie na DOM po transformácii triedy:

HTML kód:

< telo štýl = 'text-align: center;' >
< h2 > Zmeniť prvok Názov triedy

Starý názov triedy je: predvolená trieda

V kóde JS deklarujte funkciu s názvom „ Trieda() “. Tu získate prístup k predvolenej triede pomocou jej ID pomocou „ document.getElementById() “. ' className vlastnosť ” transformuje vytvorenú triedu na triedu s názvom “ newClass “.

Nakoniec, „ vnútornýText Vlastnosť ” zobrazí nasledujúcu správu spolu so zmenenou triedou:

JS kód:

Výkon

Vo vyššie uvedenom výstupe sledujte zmenu „ trieda ” vpravo po kliknutí na tlačidlo v DOM.

Prístup 2: Zmeňte triedu prvku HTML pomocou JavaScriptu pomocou vlastnosti classList

Tento konkrétny prístup možno implementovať na odstránenie špecifikovanej triedy a priradenie novej triedy k nej, čím sa zmení.

Príklad

Najprv zopakujte vyššie diskutované metódy na zahrnutie nadpisu, vytvorenie tlačidla s priradenou triedou, id a pripojenou udalosťou onclick vyvolávajúcu špecifikovanú funkciu. Potom podobne pridajte sekciu nadpisu do „

” značka upozorní používateľa na zmenenú triedu po kliknutí na tlačidlo:

HTML kód

< telo štýl = 'text-align: center;' >
< h2 > Zmeniť triedu prvku ! h2 >
< tlačidlo trieda = 'webová stránka' po kliknutí = 'Trieda()' id = 'zmena' > Klikni na mňa tlačidlo >
< h3 id = 'hlava' štýl = 'farba pozadia: svetlošedá;' > Starý názov triedy je: Webová stránka h3 >
telo >

Teraz deklarujte funkciu s názvom „ Trieda() “. Vo svojej definícii použite „ classList “vlastnosť spolu s “ odstrániť () ” metóda na vynechanie sprístupnenej triedy s názvom “ webové stránky “, ktoré zodpovedá vytvorenému tlačidlu.

V ďalšom kroku priraďte k rovnakej triede novú triedu pomocou diskutovanej vlastnosti s „ pridať () “. Nakoniec zobrazte zmenenú triedu, ako je uvedené v predchádzajúcom prístupe:

Kód JS

funkciu Trieda ( ) {
document.getElementById ( 'zmena' ) .classList.remove ( 'webová stránka' )
document.getElementById ( 'zmena' ) .classList.add ( 'linux' ) ;
var access = document.getElementById ( 'zmena' ) .classList;
document.getElementById ( 'hlava' ) .innerHTML = 'Nový názov triedy je:' + prístup;
}

Výkon

Tento zápis chcel objasniť koncept zmeny triedy prvku HTML pomocou JavaScriptu.

Záver

' className “ a „ classList ” vlastnosti možno použiť na zmenu triedy prvku HTML. Vlastnosť className viedla k rýchlejšiemu prístupu pri vykonávaní požadovanej požiadavky v porovnaní s vlastnosťou classList, pretože zahŕňala menšiu zložitosť kódu. Vlastnosť classList na druhej strane zmenila predvolenú triedu pomocou ďalších dvoch metód. Tento článok ilustroval prístupy k zmene triedy prvku HTML pomocou JavaScriptu.