Šī ziņa ilustrē procedūru vairāku atribūtu iestatīšanai HTML elementā, izmantojot JavaScript.
Kā elementam iestatīt vairākus atribūtus, izmantojot JavaScript?
Lai elementam vienlaikus iestatītu vairākus atribūtus, vispirms izveidojiet objektu ar atribūtu nosaukumiem un vērtībām. Iegūstiet objekta atslēgu sarakstu kā masīvu ar ' Object.keys() ' metodi, pēc tam iestatiet visus norādītā HTML elementa atribūtus ar ' setAttribute() ” metode.
Sintakse
Dotā sintakse tiek izmantota setAttribute() metodei:
elements. setAttribute ( attrName, attrValue ) ;
Iepriekš minētajā sintakse satur divus parametrus: ' nosaukums ' un ' vērtību ”.
- ' attrName ” ir jaunā atribūta nosaukums.
- ' attrValue ” ir jaunā atribūta vērtība.
- Šī metode izveidos jaunu atribūtu un piešķirs tam vērtību. Ja norādītais atribūts jau pastāv, tā vērtība tiks atjaunināta.
Metodei Object.keys() izmantojiet norādīto sintaksi:
Objekts . atslēgas ( objektu )Tas atgriež dotā objekta masīvu.
1. piemērs. Vairāku atribūtu iestatīšana elementam, izmantojot metodi forEach() ar metodi setAttribute()
Vispirms HTML failā izveidojiet elementu:
< pogas ID = 'poga' > LINUXHINT pogu >Šobrīd mājas lapa izskatīsies šādi:
JavaScript kodā vispirms izveidojiet objektu ar nosaukumu ' elementAtribūti ” un pievienojiet objektam atribūtus ar nosaukumiem un vērtībām. Šeit mēs pievienosim stila atribūtu, elementa nosaukumu un pogas elementa atspējošanas rekvizītu:
konst elementAtribūti = {stils : 'fona krāsa: rgb(153, 28, 49); krāsa: balta;' ,
nosaukums : 'LinuxButton' ,
invalīds : '' ,
} ;
Tagad definējiet funkciju ar nosaukumu ' setMultipleAttributesonElement ', kur vispirms zvaniet ' Object.keys() ” metodi, lai iegūtu objekta atslēgu masīvu, un pēc tam izmantojiet katram() ' metodi, lai atkārtotu masīvu un visbeidzot izsauktu ' setAttribute() ” metodi, lai iestatītu visus definētos atribūtus norādītajā HTML elementā.
funkcija setMultipleAttributesonElement ( elements, elementAtribūti ) {Objekts . atslēgas ( elementAtribūti ) . katram ( atribūts => {
elements. setAttribute ( atribūts, elemAtribūti [ atribūts ] ) ;
} ) ;
}
Iegūstiet pogu, izmantojot tai piešķirto ID, izmantojot ' getElementById() ” metode:
konst pogu = dokumentu. getElementById ( 'poga' ) ;Izsaukt definēto funkciju ' setMultipleAttributesonElement ” un nododiet elementu kā pirmo argumentu un atribūtu objektu kā otro argumentu:
setMultipleAttributesonElement ( poga, elementsAtribūti ) ;Izvade parāda, ka vairāki pogas atribūti ir veiksmīgi pievienoti:
Varat arī iestatīt vairākus atribūtus elementam, neveidojot atsevišķu objektu atribūtiem. Lai to izdarītu, izpildiet tālāk sniegto piemēru.
2. piemērs. Vairāku atribūtu iestatīšana elementam, izmantojot ciklu ar metodi setAttribute()
Definējiet funkciju ar diviem parametriem JavaScript failā un izmantojiet for cilpu, lai tajā iestatītu vairākus atribūtus, izsaucot ' setAttribute() ” metode:
funkcija setMultipleAttributesonElement ( elements, elementAtribūti ) {priekš ( ļaut i iekšā elemAttributes ) {
elements. setAttribute ( i, elemAtribūti [ i ] ) ;
}
}
Izgūt pogu, izmantojot tai piešķirto ID:
konst pogu = dokumentu. getElementById ( 'poga' ) ;Izsauciet definēto funkciju, nododot pogas elementu un vairākus atribūtus nosaukuma un vērtības pāru veidā:
setMultipleAttributesonElement ( poga, { 'stils' : 'fona krāsa: rgb(153, 28, 49); krāsa: balta;' , 'invalīds' : '' , 'vārds' : 'LinuxButton' } ) ;Izvade
Mēs esam apkopojuši visu būtisko informāciju, kas saistīta ar vairāku atribūtu iestatīšanu HTML elementā, izmantojot JavaScript.
Secinājums
Iepriekš definētais JavaScript setAttribute() ” metode tiek izmantota, lai elementam iestatītu vienu vai vairākus atribūtus. Lai elementam iestatītu vairākus atribūtus, vispirms izveidojiet objektu, kas satur atribūtus nosaukumu-vērtību formā. Iegūstiet masīva objektu atslēgas, izmantojot ' Object.keys() ' metodi, pēc tam iestatiet visus norādīto elementu atribūtus ar ' setAttribute() ” metode. Šajā ziņā mēs esam ilustrējuši procedūru vairāku atribūtu iestatīšanai HTML elementā, izmantojot JavaScript.