Angi flere attributter på et element ved hjelp av JavaScript

Attributter definerer tilleggsfunksjoner eller egenskaper til et HTML -element, for eksempel farge, bredde, høyde og så videre. For å gi en attributt til elementet, navnverdipar, for eksempel “Navn = verdi”, Brukes der attributtets verdi skal være vedlagt i anførselstegn. Så for å angi verdien av en attributt på det spesifiserte elementet, bruk "Element.setAttribute ()”Metode.

Dette innlegget vil illustrere prosedyren for å angi flere attributter på et HTML -element ved hjelp av JavaScript.

Hvordan sette flere attributter på et element ved hjelp av JavaScript?

For å angi flere attributter på et element samtidig, oppretter du først et objekt med attributtnavn og verdier. Få en liste over objektets nøkler som en matrise med "Gjenstand.nøkler ()”Metode angir deretter alle attributtene på det spesifiserte HTML -elementet med“setAttribute ()”Metode.

Syntaks

Den gitte syntaks brukes til SetAttribute () -metoden:

element.setAttribute (attrname, attrValue);

Ovennevnte syntaks inneholder to parametere: “Navn”Og“verdi”.

• “attrname”Er navnet på den nye attributtet.
• “attrValue”Er verdien av den nye attributtet.
• Denne metoden vil lage en ny attributt og tilordne det en verdi. Hvis det spesifiserte attributtet allerede eksisterer, vil verdien oppdateres.

Bruk den gitte syntaks for objektet.Keys () Metode:

Gjenstand.nøkler (objekt)

Den returnerer en rekke av et gitt objekt.

Eksempel 1: Angi flere attributter på et element ved bruk av foreach () -metode med setAttribute () -metode

Lag først et element i HTML -filen:

Linuxhint

For øyeblikket vil websiden se slik ut:

I JavaScript -kode, først, opprette et objekt som heter “elementattributter”Og legg til attributtene med navn og verdier til objektet. Her vil vi legge til stilattributtet, navnet på elementet og deaktiverte egenskapen for knappelementet:

const elementAttribute =
Stil: 'Bakgrunnsfarge: RGB (153, 28, 49); Farge: hvit; ',
Navn: 'LinuxButton',
funksjonshemmet: ",
;

Nå, definer en funksjon som heter “setMultipleAttributeSonElement”Hvor først kaller“Gjenstand.nøkler ()”Metode for å få utvalget av objektets nøkler og deretter bruke“for hver()”Metode for å iterere gjennom matrisen og til slutt kalle“setAttribute ()”Metode for å angi alle de definerte attributtene på det spesifiserte HTML -elementet.

funksjon setMultipleAttributeSonElement (Elem, Elemattribute)
Gjenstand.nøkler (elementattributter).foreach (attributt =>
Elem.setAttribute (attributt, elemattributter [attributt]);
);

Hent knappen ved å bruke sin tildelte ID ved hjelp av “getElementById ()”Metode:

const -knapp = dokument.getElementById ('knapp');

Påkalle den definerte funksjonen "setMultipleAttributeSonElement”Og passere elementet som det første argumentet og objektet med attributter som det andre argumentet:

setMultipleAttributeOnElement (knapp, elementattributter);

Utgangen viser at de flere attributtene til en knapp er lagt til:

Du kan også angi flere attributter på et element uten å lage et eget objekt for attributtene. For å gjøre dette, følg eksemplet nedenfor.

Eksempel 2: Angi flere attributter på et element som bruker for Loop med SetAttribute () -metode

Definer en funksjon med to parametere i en JavaScript -fil og bruk en for loop for å angi flere attributter inne i den ved å ringe "setAttribute ()”Metode:

funksjon setMultipleAttributeSonElement (Elem, Elemattribute)
for (la jeg inn elemattributter)
Elem.setAttribute (i, elemattributter [i]);

Hent knappen ved å bruke den tildelte ID -en:

const -knapp = dokument.getElementById ('knapp');

Ring den definerte funksjonen ved å passere knappelementet og flere attributter i form av navnverdipar:

setMultipleAttributeSonElement (knapp, "Style": "Bakgrunnsfarge: RGB (153, 28, 49); Color: White;", "Deaktivert": "", "Navn": "LinuxButton");

Produksjon

Vi har samlet all viktig informasjon relatert til å sette flere attributter på et HTML -element ved hjelp av JavaScript.

Konklusjon

JavaScript forhåndsdefinerte setAttribute ()”Metode brukes til å angi enkelt- eller flere attributter for et element. For å stille inn flere attributter på et element, lag først et objekt som inneholder attributter i form av navn-verdier. Få nøklene til objekter i en matrise ved å bruke “Gjenstand.nøkler ()”Metode, og sett deretter alle attributtene på de spesifiserte elementene med“setAttribute ()”Metode. I dette innlegget har vi illustrert prosedyren for å angi flere attributter på et HTML -element ved hjelp av JavaScript.