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.