Hvordan endre klassen til et HTML-element med JavaScript?

I fasen med å designe en nettside eller et nettsted, er det visse situasjoner der du ikke lenger trenger å få tilgang til enkelte elementer på grunn av en oppdatering. Dessuten, når det er behov for å tilordne mer enn én klasse til et spesifikt element i html. I slike case-scenarier er endring av klassen til et HTML-element i JavaScript til stor hjelp for å imøtekomme slike situasjoner.

Denne bloggen vil demonstrere tilnærmingene du bør vurdere når du endrer et HTML-elements klasse i JavaScript.

Hvordan endre klassen til et HTML-element med JavaScript?

For å endre klassen til et HTML-element med JavaScript, kan følgende tilnærminger brukes:

• • ' klassenavn ” eiendom.
  • ' klasseliste ” eiendom.

Tilnærming 1: Endre klassen til et HTML-element med JavaScript ved å bruke className-egenskapen

Denne tilnærmingen kan tre i kraft ved å få tilgang til den opprettede klassen knyttet til et element og tilordne den en annen klasse.

Følgende eksempel demonstrerer det angitte konseptet.

Eksempel

I koden nedenfor i ' '-taggen, inkluderer følgende overskrift i '

' stikkord. Etter det, lag den angitte knappen som vil bli tildelt en standard ' klasse ” som vil bli endret senere i koden. Tildel den også en ' id ' og en vedlagt ' ved trykk ” hendelse som påkaller funksjonen Class().

Senere i koden inkluderer følgende melding i '

'-taggen for å vise den på DOM ved transformasjon av klassen:

HTML-kode:

< kropp stil = 'text-align: center;' >
< h2 > Endre element sin klassenavn

Gammelt klassenavn er: standardklasse

I JS-koden, erklær en funksjon kalt ' Klasse() '. Her får du tilgang til standardklassen ved hjelp av dens id ved å bruke ' document.getElementById() 'metoden. « klassenavn '-egenskapen vil transformere den opprettede klassen til klassen kalt ' ny klasse '.

Til slutt, ' indreTekst egenskapen vil vise følgende melding sammen med den endrede klassen:

JS-kode:

Produksjon

I utgangen ovenfor, observer endringen av ' klasse ” til høyre ved å klikke på knappen i DOM.

Tilnærming 2: Endre klassen til et HTML-element med JavaScript ved å bruke classList-egenskapen

Denne spesielle tilnærmingen kan implementeres for å fjerne den spesifiserte klassen og tilordne en ny klasse til den og dermed endre den.

Eksempel

Gjenta først de ovenfor omtalte metodene for å inkludere en overskrift, lage en knapp med den tilordnede klassen, id og vedlagte onclick-hendelse som påkaller den spesifiserte funksjonen. Deretter legger du på samme måte til overskriftsdelen i '

'-taggen for å varsle brukeren om den endrede klassen ved å klikke på knappen:

HTML-kode

< kropp stil = 'text-align: center;' >
< h2 > Endre klasse av element ! h2 >
< knapp klasse = 'Nettsted' ved trykk = 'Klasse()' id = 'endring' > Klikk på meg knapp >
< h3 id = 'hode' stil = 'bakgrunnsfarge: lysegrå;' > Gammelt klassenavn er: Nettsted h3 >
kropp >

Deklarer nå en funksjon som heter ' Klasse() '. I sin definisjon, bruk ' klasseliste ' eiendom sammen med ' fjerne() '-metoden for å utelate den åpnede klassen kalt ' Nettsted ” som tilsvarer den opprettede knappen.

I neste trinn tilordner du en ny klasse til samme klasse ved å bruke den diskuterte egenskapen med ' legge til() 'metoden. Til slutt, vis den endrede klassen som diskutert i forrige tilnærming:

JS-kode

funksjon Klasse ( ) {
document.getElementById ( 'endring' ) .classList.remove ( 'Nettsted' )
document.getElementById ( 'endring' ) .classList.add ( 'Linux' ) ;
var access = document.getElementById ( 'endring' ) .classList;
document.getElementById ( 'hode' ) .innerHTML = 'Nytt klassenavn er:' + tilgang;
}

Produksjon

Denne oppskriften mente å fjerne konseptet med å endre HTML-elementets klasse ved å bruke JavaScript.

Konklusjon

« klassenavn ' og ' klasseliste egenskaper kan brukes til å endre klassen til et HTML-element. className-egenskapen førte til en raskere tilnærming til å utføre det ønskede kravet sammenlignet med classList-egenskapen da den innebar mindre kodekompleksitet. ClassList-egenskapen, derimot, endret standardklassen ved hjelp av ytterligere to metoder. Denne artikkelen illustrerte tilnærmingene for å endre HTML-elementets klasse med JavaScript.