See postitus illustreerib HTML-i elemendi mitme atribuudi määramise protseduuri JavaScripti abil.
Kuidas seada JavaScripti abil elemendile mitu atribuuti?
Elemendile mitme atribuudi samaaegseks määramiseks looge esmalt atribuutide nimede ja väärtustega objekt. Hankige objekti võtmete loend massiivina ' Object.keys() ”, seejärel määrake kõik määratud HTML-i elemendi atribuudid ' setAttribute() ” meetod.
Süntaks
Antud süntaksit kasutatakse meetodi setAttribute() jaoks:
element. setAttribute ( attrName, attrValue ) ;
Ülaltoodud süntaks sisaldab kahte parameetrit: ' nimi ” ja „ väärtus ”.
- “ attrName ” on uue atribuudi nimi.
- “ attrValue ” on uue atribuudi väärtus.
- See meetod loob uue atribuudi ja määrab sellele väärtuse. Kui määratud atribuut on juba olemas, värskendatakse selle väärtust.
Kasutage meetodi Object.keys() jaoks etteantud süntaksit:
Objekt . võtmed ( objektiks )See tagastab antud objekti massiivi.
Näide 1: määrake elemendile mitu atribuuti, kasutades meetodit forEach() koos meetodiga setAttribute()
Esmalt looge HTML-failis element:
< nupu id = 'nupp' > LINUXHINT nuppu >Praegu näeb veebileht välja selline:
Esmalt looge JavaScripti koodis objekt nimega ' elementAtribuudid ” ja lisa objektile atribuudid koos nimede ja väärtustega. Siin lisame nupu elemendi stiiliatribuudi, elemendi nime ja keelamise atribuudi:
konst elementAtribuudid = {stiilis : 'taustavärv: rgb(153, 28, 49); värv: valge;' ,
nimi : 'LinuxButton' ,
puudega : '' ,
} ;
Nüüd määrake funktsioon nimega ' setMultipleAttributesonElement kus kõigepealt helistage Object.keys() ' meetodit objekti võtmete massiivi hankimiseks ja seejärel kasutage ' igaühele() ' meetodit massiivi läbimiseks ja lõpuks ' setAttribute() ” meetod, et määrata määratud HTML-elemendile kõik määratletud atribuudid.
funktsioon setMultipleAttributesonElement ( element, elementAtribuudid ) {Objekt . võtmed ( elementAtribuudid ) . igaühele ( atribuut => {
element. setAttribute ( atribuut, elemAtribuudid [ atribuut ] ) ;
} ) ;
}
Hankige nupp, kasutades sellele määratud ID-d, kasutades ' getElementById() ” meetod:
konst nuppu = dokument. getElementById ( 'nupp' ) ;Avage määratletud funktsioon ' setMultipleAttributesonElement ” ja edasta element esimese argumendina ja atribuutide objekt teise argumendina:
setMultipleAttributesonElement ( nupp, elementAtribuudid ) ;Väljund näitab, et nupu mitu atribuuti on edukalt lisatud:
Samuti saate elemendile määrata mitu atribuuti ilma atribuutide jaoks eraldi objekti loomata. Selleks järgige allolevat näidet.
Näide 2: määrake elemendile mitu atribuuti, kasutades tsüklit koos meetodiga setAttribute()
Määratlege JavaScripti failis kahe parameetriga funktsioon ja kasutage selle sees mitme atribuudi määramiseks tsüklit for, kutsudes välja ' setAttribute() ” meetod:
funktsioon setMultipleAttributesonElement ( element, elementAtribuudid ) {jaoks ( lasen sisse elemAttributes ) {
element. setAttribute ( i, elemAtribuudid [ i ] ) ;
}
}
Hankige nupp, kasutades sellele määratud ID-d:
konst nuppu = dokument. getElementById ( 'nupp' ) ;Määratud funktsiooni kutsumiseks edastage nupuelement ja mitu atribuuti nime-väärtuse paaride kujul:
setMultipleAttributesonElement ( nupp, { 'stiil' : 'taustavärv: rgb(153, 28, 49); värv: valge;' , 'puuetega' : '' , 'nimi' : 'LinuxButton' } ) ;Väljund
Oleme koostanud kogu olulise teabe, mis on seotud mitme HTML-elemendi atribuudi määramisega JavaScripti abil.
Järeldus
Eelmääratletud JavaScript setAttribute() ” meetodit kasutatakse elemendi ühe või mitme atribuudi määramiseks. Elemendile mitme atribuudi määramiseks looge esmalt objekt, mis sisaldab atribuute nimede-väärtuste kujul. Hankige massiivi objektide võtmed, kasutades ' Object.keys() ' meetodit, seejärel määrake kõik määratud elementide atribuudid ' setAttribute() ” meetod. Selles postituses oleme illustreerinud HTML-i elemendi mitme atribuudi määramise protseduuri JavaScripti abil.