Indstil flere attributter på et element ved hjælp af JavaScript

Indstil Flere Attributter Pa Et Element Ved Hjaelp Af Javascript



Attributter definerer yderligere funktioner eller egenskaber for et HTML-element, såsom farve, bredde, højde og så videre. For at angive en attribut til elementet, navn-værdi-par, såsom ' navn = værdi ”, bruges hvor attributtens værdi skal være omgivet af anførselstegn. Så for at indstille værdien af ​​en attribut på det angivne element, brug ' Element.setAttribute() ” metode.

Dette indlæg vil illustrere proceduren for at indstille de flere attributter på et HTML-element ved hjælp af JavaScript.

Hvordan indstilles flere attributter på et element ved hjælp af JavaScript?

For at indstille flere attributter på et element samtidigt, skal du først oprette et objekt med attributnavnene og værdierne. Få en liste over objektets nøgler som et array med ' Object.keys() ”-metoden, indstil derefter alle attributterne på det angivne HTML-element med “ setAttribute() ” metode.







Syntaks



Den givne syntaks bruges til setAttribute() metoden:



element. setAttribute ( attrName, attrValue ) ;

Ovenstående syntaks indeholder to parametre: ' navn ' og ' værdi ”.





  • attrNavn ” er navnet på den nye attribut.
  • attrVærdi ” er værdien af ​​den nye attribut.
  • Denne metode vil oprette en ny attribut og tildele den en værdi. Hvis den angivne attribut allerede eksisterer, vil dens værdi blive opdateret.

Brug den givne syntaks til Object.keys() metoden:

Objekt . nøgler ( objekt )

Det returnerer en matrix af et givet objekt.



Eksempel 1: Indstil flere attributter på et element ved hjælp af forEach()-metoden med setAttribute()-metoden

Først skal du oprette et element i HTML-filen:

< knap-id = 'knap' > LINUXHINT knap >

I øjeblikket vil websiden se sådan ud:

I JavaScript-kode skal du først oprette et objekt med navnet ' elementattributter ” og tilføj attributterne med navne og værdier til objektet. Her tilføjer vi stilattributten, navnet på elementet og deaktiveringsegenskaben for knapelementet:

konst elementattributter = {

stil : 'baggrundsfarve: rgb(153, 28, 49); farve: hvid;' ,

navn : 'LinuxButton' ,

handicappet : '' ,

} ;

Definer nu en funktion ved navn ' sætMultipleAttributesonElement ' hvor først kalder ' Object.keys() '-metoden til at hente rækken af ​​objektets nøgler og derefter bruge ' for hver() '-metoden til at iterere gennem arrayet og til sidst kalde ' setAttribute() ” metode til at indstille alle de definerede attributter på det angivne HTML-element.

funktion sætMultipleAttributesonElement ( element, elementAttributter ) {

Objekt . nøgler ( elementattributter ) . for hver ( attribut => {

element. setAttribute ( attribut, elemAttributter [ attribut ] ) ;

} ) ;

}

Hent knappen ved hjælp af dens tildelte id ved hjælp af ' getElementById() ” metode:

konst knap = dokument. getElementById ( 'knap' ) ;

Kald den definerede funktion ' sætMultipleAttributesonElement ' og send elementet som det første argument og objektet for attributter som det andet argument:

sætMultipleAttributesonElement ( knap, elementAttributter ) ;

Outputtet viser, at de flere attributter for en knap er blevet tilføjet:

Du kan også indstille flere attributter på et element uden at oprette et separat objekt for attributterne. For at gøre dette, følg nedenstående eksempel.

Eksempel 2: Indstil flere attributter på et element ved at bruge for Loop med metoden setAttribute().

Definer en funktion med to parametre i en JavaScript-fil, og brug en for-løkke til at indstille flere attributter inde i den ved at kalde ' setAttribute() ” metode:

funktion sætMultipleAttributesonElement ( element, elementAttributter ) {

til ( lad jeg ind elemAttributter ) {

element. setAttribute ( i, elemAttributter [ jeg ] ) ;

}

}

Hent knappen ved hjælp af dens tildelte id:

konst knap = dokument. getElementById ( 'knap' ) ;

Kald den definerede funktion ved at overføre knapelementet og flere attributter i form af navn-værdi-par:

sætMultipleAttributesonElement ( knap, { 'stil' : 'baggrundsfarve: rgb(153, 28, 49); farve: hvid;' , 'handicappet' : '' , 'navn' : 'LinuxButton' } ) ;

Produktion

Vi har samlet al den væsentlige information relateret til indstilling af de flere attributter på et HTML-element ved hjælp af JavaScript.

Konklusion

Det foruddefinerede JavaScript setAttribute() ” metode bruges til at angive enkelte eller flere attributter for et element. For at indstille de flere attributter på et element skal du først oprette et objekt, der indeholder attributter i form af navne-værdier. Få nøglerne til objekter i et array ved hjælp af ' Object.keys() ”-metoden, indstil derefter alle attributterne på de angivne elementer med ” setAttribute() ” metode. I dette indlæg har vi illustreret proceduren til at indstille flere attributter på et HTML-element ved hjælp af JavaScript.