Ta objava bo ponazorila postopek za nastavitev več atributov na elementu HTML z uporabo JavaScripta.
Kako nastaviti več atributov na element z uporabo JavaScripta?
Če želite elementu hkrati nastaviti več atributov, najprej ustvarite predmet z imeni in vrednostmi atributov. Pridobite seznam ključev predmeta kot niz z ' Object.keys() ', nato pa nastavite vse atribute na navedenem elementu HTML z ' setAtribut() ” metoda.
Sintaksa
Dana sintaksa se uporablja za metodo setAttribute():
element. setAttribute ( attrName, attrValue ) ;
Zgornja sintaksa vsebuje dva parametra: “ ime « in » vrednost ”.
- “ attrName ” je ime novega atributa.
- “ attrValue ” je vrednost novega atributa.
- Ta metoda bo ustvarila nov atribut in mu dodelila vrednost. Če navedeni atribut že obstaja, bo njegova vrednost posodobljena.
Za metodo Object.keys() uporabite dano sintakso:
Objekt . ključi ( predmet )Vrne matriko danega predmeta.
Primer 1: Nastavitev več atributov za element z uporabo metode forEach() z metodo setAttribute()
Najprej ustvarite element v datoteki HTML:
< ID gumba = 'gumb' > LINUXHINT gumb >Trenutno bo spletna stran videti takole:
V kodi JavaScript najprej ustvarite objekt z imenom ' elementAttributes ” in objektu dodajte atribute z imeni in vrednostmi. Tukaj bomo dodali atribut sloga, ime elementa in lastnost onemogoči za element gumba:
konst elementAttributes = {stil : 'barva-ozadje: rgb(153, 28, 49); barva: bela;' ,
ime : 'LinuxButton' ,
onemogočeno : '' ,
} ;
Zdaj definirajte funkcijo z imenom ' setMultipleAttributesonElement ' kjer najprej pokličete ' Object.keys() ' za pridobivanje niza ključev predmeta in nato uporabite ' za vsakogar() ” za ponavljanje skozi matriko in končno klicanje setAtribut() ” za nastavitev vseh definiranih atributov na navedenem elementu HTML.
funkcija setMultipleAttributesonElement ( element, elementAttributes ) {Objekt . ključi ( elementAttributes ) . za vsakogar ( atribut => {
element. setAttribute ( atribut, elemAttributes [ atribut ] ) ;
} ) ;
}
Pridobite gumb z uporabo dodeljenega ID-ja s pomočjo ' getElementById() ” metoda:
konst gumb = dokument. getElementById ( 'gumb' ) ;Prikličite definirano funkcijo “ setMultipleAttributesonElement ” in posredujte element kot prvi argument in objekt atributov kot drugi argument:
setMultipleAttributesonElement ( gumb, elementAttributes ) ;Izhod pokaže, da je več atributov gumba uspešno dodanih:
Na element lahko nastavite tudi več atributov, ne da bi ustvarili ločen objekt za atribute. Če želite to narediti, sledite spodnjemu primeru.
Primer 2: Nastavitev več atributov za element z uporabo zanke for z metodo setAttribute()
Definirajte funkcijo z dvema parametroma v datoteki JavaScript in uporabite zanko for, da v njej nastavite več atributov, tako da pokličete » setAtribut() ” metoda:
funkcija setMultipleAttributesonElement ( element, elementAttributes ) {za ( pustim v elemAttributes ) {
element. setAttribute ( i, elemAttributes [ jaz ] ) ;
}
}
Pridobite gumb z uporabo dodeljenega ID-ja:
konst gumb = dokument. getElementById ( 'gumb' ) ;Pokličite definirano funkcijo tako, da posredujete element gumba in več atributov v obliki parov ime-vrednost:
setMultipleAttributesonElement ( gumb, { 'slog' : 'barva ozadja: rgb(153, 28, 49); barva: bela;' , 'onemogočeno' : '' , 'ime' : 'LinuxButton' } ) ;Izhod
Zbrali smo vse bistvene informacije v zvezi z nastavitvijo več atributov na elementu HTML z uporabo JavaScripta.
Zaključek
Vnaprej določen JavaScript setAtribut() ” se uporablja za nastavitev enega ali več atributov za element. Če želite elementu nastaviti več atributov, najprej ustvarite objekt, ki vsebuje atribute v obliki imen-vrednosti. Pridobite ključe predmetov v matriki z uporabo ' Object.keys() ', nato nastavite vse atribute za podane elemente z ' setAtribut() ” metoda. V tej objavi smo prikazali postopek za nastavitev več atributov elementu HTML z uporabo JavaScripta.