Hvordan få og endre elementets attributter, klasser og stiler gjennom JavaScript

Ofte må websider endre elementene sine eller hvordan elementene deres ser ut avhengig av brukerens handlinger eller valg. Endring av en webpestens elementer, attributter, klasser og stiler gjøres alt ved hjelp av Dom (Dokumentobjektmodell). DOM er satt som en standard for hvordan hver nettleser vil tolke HTML -nettsiden og hvordan den vil få tilgang til de forskjellige elementene på nettsiden av W3C (World Wide Web Consortium).

JavaScript samhandler også med elementene på en HTML -side ved å bruke DOM, og i dette innlegget skal vi lære å få tilgang til HTML -elementer med JavaScript og hvordan du endrer attributter, klasser og stil ved hjelp av JavaScript.

Så la oss først lage en HTML -side med forskjellige elementer på den ved å bruke følgende kodelinjer:

Endre stilen min

Endre attributtet mitt

Endre klassen min

Disse kodelinjene vil gi oss følgende webside:

Hvordan få elementer i JavaScript

Før vi ser på hvordan vi kan endre elementer ved hjelp av JavaScript, må vi først vite hvordan vi får elementer i JavaScript. For å få elementets referanse, kan vi bruke en av de forskjellige funksjonene som er levert av JavaScript som:

• getElementById ()
• getElementByClassName ()
• getElementByname ()
• getElementBytagName ()
• getElementBytagnamens ()

De er alle ganske enkle å bruke og forstå ved navn. Anta at vi har et element inne i HTML -en vår med en ID av “xyz”, For å få tilgang til dataene til dette elementet, vil vi bruke følgende linje i JavaScript -filen eller skriptetoden:

var obj = dokument.getElementById ("XYZ");

Tilsvarende, hvis vi prøver å få tilgang til et element ved å bruke klassenavnet, ville vi bruke GetElementByClassName () -funksjonen.

Endrer stil av et element

Når vi ser på HTML -filen vår, vet vi at DIV som sier “Endre min stil” har ID for “ChangStyle”, Så vi kommer til å få tilgang til det med følgende linje:

var cs = dokument.getElementById ("ChangSestyle");

Nå, at vi har vår elementreferanse i variabelen “CS”, kan vi få tilgang til stilfunksjonen ved å bruke Dot-Operator Og derfra kan vi endre de forskjellige stilverdiene. Hvis vi for eksempel skulle endre bakgrunnsfargen til gul, ville vi brukt linjen:

CS.stil.BakgrunnColor = "Gul";

Etter å ha kjørt HTML -filen, vil du se følgende utdata:

Du kan også se på bildet over, at vi var i stand til å endre stilen til elementet.

Endre klassen til et element ved hjelp av JavaScript

Vi har elementet med ID -en "ChangeClass" som har en klasse "MyClass", for å endre klassen til dette elementet det første vi trenger å gjøre er å referere til dette elementet i JavaScript ved å bruke følgende kodelinje:

var cc = dokument.getElementById ("ChangeClass");

Nå som vi har elementreferansen i variabelen “CC”Vi kan få tilgang til dens klasser -attributt ved å bruke ClassList () funksjon. For å legge til en ny klasse "Newclass" i samme variabel, kan vi bruke følgende kodelinje:

CC.Klasseliste.Legg til ("Newclass");

Hvis du åpner opp utviklerens konsoll og sjekker klasseattributtet, finner du følgende resultat:

Som du ser, kunne du legge til en annen klasse i klasseattributtet til elementet ved å bruke JavaScript. Hvis du vil fjerne en allerede eksisterende klasse fra listen, kan du bruke følgende kodelinje:

CC.Klasseliste.Fjern ("MyClass");

Etter å ha utført linjen ovenfor, vil du se følgende resultater i utviklerkonsollen:

Og der går du; Du var i stand til å fjerne en klasse fra klasselisten over et element ved hjelp av JavaScript.

Endring av elementets attributt

JavaScript har en funksjon som heter “setAttribute”Som lar brukeren endre verdien av ethvert attributt til elementet, enten det kan være en" klasse "attributt eller en" ID "-attributt. For å endre klassen til et element, la oss for eksempel først peke på elementet som sier “Endre attributtet mitt, vi bruker følgende kodeinje:

var ca = dokument.getElementById ("ChangeAtTr");

Og så kan vi bruke "SetAttribute" -funksjonen som:

ca.setAttribute ("klasse", "hei");

Nå kan vi observere denne endringen i utviklerverktøyene som

Vi kan til og med tilordne våre egne attributter til elementet ved å bruke funksjonen, for eksempel hvis vi ønsker en attributt av "NewAtt”Til dette elementet med en verdi av“Ferdig”, Kan vi legge til det ved å bruke følgende kodelinje:

ca.setAttribute ("newattr", "done");

Og hvis vi observerer elementet i utviklerkonsollen, kan vi se følgende resultat:

Som det er klart på bildet over, kunne vi legge til et nytt attributt som heter “NewAtt”Til vårt element ved hjelp av JavaScript.

Konklusjon

JavaScript inneholder forskjellige funksjoner og funksjoner som hjelper oss med å endre forskjellige egenskaper og attributter til et HTML -element. Alle disse endringene i et HTML -element gjøres ved hjelp av dokumentobjektsmodellen (DOM) når JavaScript samhandler med DOM for å endre egenskapene til et element. I dag lærte vi i dette innlegget hvordan vi kan bruke JavaScript og få en referanse til et element og deretter ved hjelp av den referansen hvordan vi kan endre stylingen til det elementet, klassen til elementet, og hvordan vi kan endre attributter til elementet. Sammen med disse endringene lærte vi til og med hvordan vi kan legge til en ny attributt etter vårt valg til et HTML -element.