Cum se schimbă clasa unui element HTML cu JavaScript?

În faza de proiectare a unei pagini web sau a unui site web, există anumite situații în care nu mai trebuie să accesezi anumite elemente din cauza unor actualizări. Mai mult, atunci când este nevoie de a atribui mai mult de o clasă unui anumit element în html. În astfel de scenarii, schimbarea clasei unui element HTML în JavaScript este de mare ajutor pentru a rezolva astfel de situații.

Acest blog va demonstra abordările de luat în considerare atunci când schimbați clasa unui element HTML în JavaScript.

Cum se schimbă clasa unui element HTML cu JavaScript?

Pentru a schimba clasa unui element HTML cu JavaScript, pot fi aplicate următoarele abordări:

• • „ numele clasei ” proprietate.
  • „ classList ” proprietate.

Abordarea 1: Schimbați clasa unui element HTML cu JavaScript utilizând proprietatea className

Această abordare poate intra în vigoare prin accesarea clasei create asociată cu un element și atribuirea acesteia unei clase diferite.

Următorul exemplu demonstrează conceptul declarat.

Exemplu

În codul de mai jos în cadrul „ „, includeți următorul titlu în „

' etichetă. După aceea, creați butonul specificat căruia i se va atribui un „ implicit” clasă ” care va fi schimbat ulterior în cod. De asemenea, atribuiți-i un „ id ” și un ” atașat onclick ” eveniment care invocă funcția Class().

Mai târziu în cod, includeți următorul mesaj în „

” etichetă pentru a o afișa pe DOM la transformarea clasei:

Cod HTML:

< corp stil = 'text-align: center;' >
< h2 > Schimbați element Numele clasei

Numele vechiului curs este: clasa implicită

În codul JS, declarați o funcție numită „ Clasă() ”. Aici, accesați clasa implicită prin id-ul său folosind „ document.getElementById() ” metoda. „ numele clasei ” proprietatea va transforma clasa creată în clasa numită “ newClass ”.

În cele din urmă, „ innerText ” proprietatea va afișa următorul mesaj împreună cu clasa schimbată:

Cod JS:

Ieșire

În rezultatul de mai sus, observați schimbarea „ clasă ” din dreapta la clic pe butonul din DOM.

Abordarea 2: Schimbați clasa unui element HTML cu JavaScript folosind proprietatea classList

Această abordare specială poate fi implementată pentru a elimina clasa specificată și pentru a-i atribui o nouă clasă, modificând-o astfel.

Exemplu

În primul rând, repetați metodele discutate mai sus pentru includerea unui titlu, crearea unui buton cu clasa atribuită, id și evenimentul onclick atașat care invocă funcția specificată. Apoi, adăugați în mod similar secțiunea de titlu în „

” etichetă pentru a notifica utilizatorul despre clasa schimbată la clic pe butonul:

Cod HTML

< corp stil = 'text-align: center;' >
< h2 > Schimbați clasa elementului ! h2 >
< buton clasă = „Site web” onclick = 'Clasă()' id = 'Schimbare' > Faceți clic pe Mine buton >
< h3 id = 'cap' stil = „culoare de fundal: gri deschis;” > Numele vechi al clasei este: Website h3 >
corp >

Acum, declarați o funcție numită „ Clasă() ”. În definiția sa, aplicați „ classList ” proprietate împreună cu ” elimina() ” pentru a omite clasa accesată numită “ Site-ul web ” care corespunde butonului creat.

În pasul următor, atribuiți o nouă clasă aceleiași clase folosind proprietatea discutată cu „ adăuga() ” metoda. În cele din urmă, afișați clasa modificată așa cum sa discutat în abordarea anterioară:

Cod JS

funcţie Clasă ( ) {
document.getElementById ( 'Schimbare' ) .classList.eliminare ( „Site web” )
document.getElementById ( 'Schimbare' ) .classList.add ( 'Linux' ) ;
var access = document.getElementById ( 'Schimbare' ) .classList;
document.getElementById ( 'cap' ) .innerHTML = 'Numele noului clasa este: ' + acces;
}

Ieșire

Acest articol a menit să clarifice conceptul de schimbare a clasei elementului HTML folosind JavaScript.

Concluzie

„ numele clasei ' și ' classList ”Proprietățile pot fi utilizate pentru a schimba clasa unui element HTML. Proprietatea className a condus la o abordare mai rapidă în îndeplinirea cerinței dorite în comparație cu proprietatea classList, deoarece implica mai puțină complexitate a codului. Proprietatea classList, pe de altă parte, a schimbat clasa implicită cu ajutorul a două metode suplimentare. Acest articol a ilustrat abordările pentru a schimba clasa elementului HTML cu JavaScript.