Hvordan endre klassen til et HTML -element med JavaScript?
I fasen med å designe en webside eller et nettsted, er det visse situasjoner der du ikke lenger trenger å få tilgang til noen spesielle elementer på grunn av en eller annen oppdatering. Når det er behov for å tilordne mer enn en klasse til et spesifikt element i HTML. I slike case-scenarios er det å endre klassen til et HTML-element i JavaScript for å imøtekomme slike situasjoner.
Denne bloggen vil demonstrere tilnærmingene du må vurdere mens du endrer et HTML -elementklasse 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 hjelp av klassenavn -egenskapen
Denne tilnærmingen kan tre i kraft ved å få tilgang til den opprettede klassen tilknyttet et element og tildele den en annen klasse.
Følgende eksempel demonstrerer det uttalte konseptet.
Eksempel
I den undergitte koden innenfor "”Tag, inkluder følgende overskrift i“" stikkord. Etter det, opprett den spesifiserte knappen som vil bli tildelt en standard “klasse”Som vil bli endret senere i koden. Også tilordne den en "id”Og en vedlagt”ved trykk”Hendelse som påkaller funksjonsklassen ().
Senere i koden, inkluderer følgende melding i “ HTML -kode: Endre elementets klassenavn Gamle klassens navn er: Standardklasse Endelig "Innertekst”Eiendom vil vise følgende melding sammen med den endrede klassen: JS -kode: Tilnærming 2: Endre klassen til et HTML -element med JavaScript ved hjelp av 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 For det første, gjenta de ovennevnte diskuterte metodene for å inkludere en overskrift, opprette en knapp med den tildelte klassen, ID og vedlagt OnClick -hendelsen som påkaller den spesifiserte funksjonen. Deretter legger du på samme måte overskriftsdelen i " HTML -kode Endre elementklasse! I neste trinn, tilordne en ny klasse til samme klasse ved å bruke den diskuterte egenskapen med "Legg til()”Metode. Til slutt, vis den endrede klassen som diskutert i forrige tilnærming: JS -kode Konklusjon “klassenavn”Og“Klasseliste”Egenskaper kan brukes til å endre klassen til et HTML -element. Klassenavnegenskapen førte til en raskere tilnærming i utførelsen av ønsket krav sammenlignet med klasselistegenskapen, da det innebar mindre kodekompleksitet. Klasselisteegenskapen, derimot, endret standardklassen ved hjelp av ytterligere to metoder. Denne artikkelen illustrerte tilnærmingene for å endre HTML -elementets klasse med JavaScript.
Klikk på meg
I JS -koden, erklær en funksjon som heter “Klasse()”. Her får du tilgang til standardklassen ved å bruke "dokument.getElementById ()”Metode. “klassenavn”Eiendom vil transformere den opprettede klassen til klassen som heter“Newclass”.funksjonsklasse ()
dokument.getElementById ('MyButton').className = "newclass";
var tilgang = dokument.getElementById ('MyButton').klassenavn;
dokument.getElementById ('hode').INNERHTML = "Nytt klassenavn er:" + tilgang;
Produksjon
I ovennevnte, observer endringen av "klasse”Til høyre ved å klikke på knappen i DOM.Gamle klassens navn er: Nettsted
Nå, erklærer en funksjon som heter “Klasse()”. I sin definisjon, bruk "Klasseliste”Eiendom sammen med“fjerne()”Metode for å utelate den tilgjengelige klassen som heter“Nettsted”Som tilsvarer den opprettede knappen.funksjonsklasse ()
dokument.getElementById ('Endre').Klasseliste.Fjern ("Nettsted")
dokument.getElementById ('Endre').Klasseliste.Legg til ("Linuxhint");
var tilgang = dokument.getElementById ('Endre').Klasseliste;
dokument.getElementById ('hode').INNERHTML = "Nytt klassenavn er:" + tilgang;
Produksjon
Denne oppskrivningen mente å fjerne konseptet med å endre HTML-elementets klasse ved hjelp av JavaScript.