Šis įrašas parodys, kaip nustatyti kelis HTML elemento atributus naudojant „JavaScript“.
Kaip nustatyti kelis elemento atributus naudojant „JavaScript“?
Norėdami vienu metu nustatyti kelis elemento atributus, pirmiausia sukurkite objektą su atributų pavadinimais ir reikšmėmis. Gaukite objekto raktų sąrašą kaip masyvą su „ Object.keys() “ metodą, tada nustatykite visus nurodyto HTML elemento atributus naudodami „ setAttribute() “ metodas.
Sintaksė
Nurodyta sintaksė naudojama setAttribute() metodui:
elementas. setAttribute ( attrName, attrValue ) ;
Aukščiau pateiktoje sintaksėje yra du parametrai: ' vardas “ ir „ vertė “.
- “ atrName “ yra naujo atributo pavadinimas.
- “ attrValue “ yra naujo atributo reikšmė.
- Šis metodas sukurs naują atributą ir priskirs jam reikšmę. Jei nurodytas atributas jau egzistuoja, jo reikšmė bus atnaujinta.
Naudokite nurodytą sintaksę Object.keys() metodui:
Objektas . raktai ( objektas )Jis grąžina tam tikro objekto masyvą.
1 pavyzdys: nustatykite kelis elemento atributus naudodami metodą forEach() su metodu setAttribute()
Pirmiausia sukurkite elementą HTML faile:
< mygtuko ID = 'mygtukas' > LINUXHINT mygtuką >Šiuo metu tinklalapis atrodys taip:
„JavaScript“ kode pirmiausia sukurkite objektą pavadinimu „ elementAtributes “ ir pridėkite prie objekto atributus su pavadinimais ir reikšmėmis. Čia pridėsime stiliaus atributą, elemento pavadinimą ir mygtuko elemento išjungimo ypatybę:
konst elementAtributes = {stilius : 'fono spalva: rgb(153, 28, 49); spalva: balta;' ,
vardas : 'Linux Button' ,
neįgalus : '' ,
} ;
Dabar apibrėžkite funkciją pavadinimu ' setMultipleAttributesonElement 'kur pirmiausia skambinkite ' Object.keys() “ metodą, norėdami gauti objekto raktų masyvą, tada naudokite „ kiekvienam() “ metodą, kad pakartotumėte masyvą ir galiausiai iškviestumėte „ setAttribute() “ metodą, norėdami nustatyti visus apibrėžtus atributus nurodytame HTML elemente.
funkcija setMultipleAttributesonElement ( elementas, elementAtributai ) {Objektas . raktai ( elementAtributes ) . kiekvienam ( atributas => {
elementas. setAttribute ( atributas, elemAttributes [ atributas ] ) ;
} ) ;
}
Gaukite mygtuką naudodami jam priskirtą ID, naudodami „ getElementById() “ metodas:
konst mygtuką = dokumentas. getElementById ( 'mygtukas' ) ;Iškviesti apibrėžtą funkciją ' setMultipleAttributesonElement “ ir perduoti elementą kaip pirmąjį argumentą, o atributų objektą – kaip antrą argumentą:
setMultipleAttributesonElement ( mygtukas, elementasAtributai ) ;Išvestis rodo, kad keli mygtuko atributai sėkmingai pridėti:
Taip pat galite nustatyti kelis elemento atributus, nesukurdami atskiro atributų objekto. Norėdami tai padaryti, vadovaukitės toliau pateiktu pavyzdžiu.
2 pavyzdys: nustatykite kelis elemento atributus naudodami for Loop su setAttribute() metodu
Apibrėžkite funkciją su dviem parametrais „JavaScript“ faile ir naudokite for kilpą, kad nustatytumėte kelis atributus joje, iškviesdami „ setAttribute() “ metodas:
funkcija setMultipleAttributesonElement ( elementas, elementAtributai ) {dėl ( Leiskite i elementAttributes ) {
elementas. setAttribute ( i, elemAttributes [ i ] ) ;
}
}
Gaukite mygtuką naudodami jam priskirtą ID:
konst mygtuką = dokumentas. getElementById ( 'mygtukas' ) ;Iškvieskite apibrėžtą funkciją perduodant mygtuko elementą ir kelis atributus pavadinimo ir reikšmės porų pavidalu:
setMultipleAttributesonElement ( mygtukas, { 'stilius' : 'fono spalva: rgb(153, 28, 49); spalva: balta;' , 'neįgalus' : '' , 'vardas' : 'Linux Button' } ) ;Išvestis
Surinkome visą esminę informaciją, susijusią su kelių atributų nustatymu HTML elemente naudojant „JavaScript“.
Išvada
„JavaScript“ iš anksto nustatytas setAttribute() “ metodas naudojamas norint nustatyti vieną ar kelis elemento atributus. Norėdami nustatyti kelis elemento atributus, pirmiausia sukurkite objektą, kuriame yra atributų pavadinimų-reikšmių pavidalu. Gaukite masyvo objektų raktus naudodami „ Object.keys() “ metodą, tada nustatykite visus nurodytų elementų atributus naudodami „ setAttribute() “ metodas. Šiame įraše iliustravome kelių HTML elemento atributų nustatymo procedūrą naudojant „JavaScript“.