Ovaj će post ilustrirati postupak postavljanja više atributa na HTML element pomoću JavaScripta.
Kako postaviti više atributa na element pomoću JavaScripta?
Da biste istovremeno postavili više atributa na element, prvo stvorite objekt s nazivima i vrijednostima atributa. Dobijte popis ključeva objekta kao niz s ' Object.keys() ', zatim postavite sve atribute na navedeni HTML element s ' setAtribute() ” metoda.
Sintaksa
Dana sintaksa koristi se za metodu setAttribute():
element. setAtribute ( attrName, attrValue ) ;
Gornja sintaksa sadrži dva parametra: “ Ime ' i ' vrijednost ”.
- “ attrName ” je naziv novog atributa.
- “ attrValue ” je vrijednost novog atributa.
- Ova metoda će stvoriti novi atribut i dodijeliti mu vrijednost. Ako navedeni atribut već postoji, tada će se njegova vrijednost ažurirati.
Koristite zadanu sintaksu za metodu Object.keys():
Objekt . ključevi ( objekt )Vraća niz zadanog objekta.
Primjer 1: Postavljanje više atributa na element pomoću metode forEach() s metodom setAttribute()
Prvo stvorite element u HTML datoteci:
< id gumba = 'dugme' > LINUXHINT dugme >Trenutno će web stranica izgledati ovako:
U JavaScript kodu prvo stvorite objekt pod nazivom ' elementAtributi ” i objektu dodajte atribute s imenima i vrijednostima. Ovdje ćemo dodati atribut stila, naziv elementa i svojstvo onemogućavanja za element gumba:
konst elementAtributi = {stil : 'boja-pozadine: rgb(153, 28, 49); boja: bijela;' ,
Ime : 'LinuxButton' ,
onemogućeno : '' ,
} ;
Sada definirajte funkciju pod nazivom ' setMultipleAttributesonElement ” gdje prvo nazovite “ Object.keys() ' za dobivanje niza ključeva objekta, a zatim upotrijebite ' za svakoga() ' za ponavljanje niza i konačno pozivanje ' setAtribute() ” za postavljanje svih definiranih atributa na navedeni HTML element.
funkcija setMultipleAttributesonElement ( element, elementAtributi ) {Objekt . ključevi ( elementAtributi ) . za svakoga ( atribut => {
element. setAtribute ( atribut, elemAttributes [ atribut ] ) ;
} ) ;
}
Dohvatite gumb koristeći mu dodijeljeni ID uz pomoć ' getElementById() ” metoda:
konst dugme = dokument. getElementById ( 'dugme' ) ;Pozvati definiranu funkciju “ setMultipleAttributesonElement ” i proslijedite element kao prvi argument, a objekt atributa kao drugi argument:
setMultipleAttributesonElement ( gumb, elementAtributi ) ;Izlaz pokazuje da su višestruki atributi gumba uspješno dodani:
Također možete postaviti više atributa na element bez stvaranja zasebnog objekta za atribute. Da biste to učinili, slijedite primjer u nastavku.
Primjer 2: Postavljanje više atributa na element pomoću petlje for s metodom setAttribute()
Definirajte funkciju s dva parametra u JavaScript datoteci i upotrijebite for petlju za postavljanje više atributa unutar nje pozivom ' setAtribute() ” metoda:
funkcija setMultipleAttributesonElement ( element, elementAtributi ) {za ( neka i u elemAttributes ) {
element. setAtribute ( i, elemAtributi [ ja ] ) ;
}
}
Dohvatite gumb koristeći mu dodijeljeni ID:
konst dugme = dokument. getElementById ( 'dugme' ) ;Pozovite definiranu funkciju prosljeđivanjem elementa gumba i više atributa u obliku parova ime-vrijednost:
setMultipleAttributesonElement ( dugme, { 'stil' : 'boja pozadine: rgb(153, 28, 49); boja: bijela;' , 'onemogućeno' : '' , 'Ime' : 'LinuxButton' } ) ;Izlaz
Prikupili smo sve bitne informacije vezane uz postavljanje višestrukih atributa na HTML element pomoću JavaScripta.
Zaključak
JavaScript unaprijed definiran setAtribute() ” metoda se koristi za postavljanje jednog ili više atributa za element. Da biste postavili više atributa na element, prvo kreirajte objekt koji sadrži atribute u obliku imena-vrijednosti. Dohvatite ključeve objekata u nizu koristeći ' Object.keys() ', zatim postavite sve atribute na navedene elemente s ' setAtribute() ” metoda. U ovom smo postu ilustrirali postupak postavljanja više atributa na HTML element pomoću JavaScripta.