Hvordan endre verdien av et HTML -elements attributt i JavaScript

Websider er designet ved hjelp av flere programmeringsspråk. To slike nettprogrammeringsspråk er HTML og JavaScript. HTML er et nettspråk som brukes til å bygge den grunnleggende strukturen på websider, i mellomtiden brukes JavaScript til å inkludere dynamisk innhold til websidene for å gjøre dem fengslende. De har begge forskjellige kjennetegn som får dem til å skille seg ut. En slik funksjon er HTML DOM. HTML DOM som er forkortelse for dokumentobjektmodell tillater JavaScript å endre innholdet i HTML -elementer.

For å endre attributtverdien til et HTML -element ved hjelp av JavaScript, gir HTML DOM flere metoder. Ved å bruke disse metodene kan du endre attributtverdien til et HTML -element på følgende måter:

1. Bruke getAttribute () -metode
2. Ved hjelp av setAttribute () -metode

La oss diskutere hver av disse i detalj.

Få attributt

Som navnet antyder er getAttribute () -metoden å trekke ut den nåværende verdien av attributtet. Syntaksen til getAttribute () -metoden er som følger.

Syntaks av getAttribute () -metode

element.getAttribute (AttributeName);

La oss se eksempel til videre forståelse.

Eksempel

Anta at du vil endre SRC -attributtverdien til elementet.

Ovennevnte kode viser et naturbilde.

Nå vil vi endre dette hundebildet til et kattebilde. Vi bruker følgende kode.

Det fulle eksemplet med utdata vises nedenfor.

Naturbildet blir endret til snøbilde

Sett attributt

For å angi en attributt på et spesifikt element, bruker vi SetAttribute () -metoden. Den oppdaterer verdien av et attributt som eksisterer på et element eller setter en ny attributt med et nytt navn og verdi på et element hvis man ikke eksisterer. Syntaksen til denne metoden er som følger.

Syntaks av setAttribute () -metode

element.setAttribute (AttributeName, AttributeValue);

La oss se et eksempel for å bedre forstå metoden.

Eksempel:

Først oppretter vi en enkel knapp med en etikett "Klikk her".

Klikk her

Nå må vi velge elementet, og vi vil gjøre det ved å bruke IDen.

var btn = dokument.getElementById ("MyBtn");

Nå vil vi bruke SetAttribute () -metoden for å angi nye attributter.

btn.setAttribute ("klasse", "klikk-BTN");
btn.setAttribute ("enable", "");

Den fulle koden langs utgangen vises nedenfor.

Klikk her

Konklusjon

For å endre attributtverdien til et HTML -element gir HTML DOM to metoder som er getAttribute () og setAttribute (). GetAttribute () brukes til å trekke ut gjeldende verdien av attributtet mens SetAttribute () brukes til å endre verdien av attributtet. I denne opplæringen diskuteres begge disse metodene i detalj sammen med passende eksempler.