Această postare va ilustra procedura de setare a atributelor multiple pe un element HTML folosind JavaScript.
Cum să setați mai multe atribute pe un element folosind JavaScript?
Pentru a seta mai multe atribute pe un element simultan, mai întâi, creați un obiect cu numele și valorile atributelor. Obțineți o listă a cheilor obiectului ca o matrice cu „ Object.keys() ”, apoi, setați toate atributele elementului HTML specificat cu „ setAttribute() ” metoda.
Sintaxă
Sintaxa dată este utilizată pentru metoda setAttribute():
element. setAttribute ( attrName, attrValue ) ;
Sintaxa de mai sus conține doi parametri: „ Nume ' și ' valoare ”.
- „ attrName ” este numele noului atribut.
- „ attrValue ” este valoarea noului atribut.
- Această metodă va crea un nou atribut și îi va atribui o valoare. Dacă atributul specificat există deja, atunci valoarea acestuia va fi actualizată.
Utilizați sintaxa dată pentru metoda Object.keys():
Obiect . chei ( obiect )Returnează o matrice a unui obiect dat.
Exemplul 1: Setați mai multe atribute pe un element folosind metoda forEach() cu metoda setAttribute()
Mai întâi, creați un element în fișierul HTML:
< ID-ul butonului = 'buton' > LINUXHINT buton >În prezent, pagina web va arăta astfel:
În codul JavaScript, mai întâi, creați un obiect numit „ elementAtribute ” și adăugați atributele cu nume și valori la obiect. Aici, vom adăuga atributul de stil, numele elementului și proprietatea dezactivare pentru elementul buton:
const elementAtribute = {stil : „culoare de fundal: rgb(153, 28, 49); culoare albă;' ,
Nume : „LinuxButton” ,
dezactivat : '' ,
} ;
Acum, definiți o funcție numită „ set MultipleAttributesonElement ” unde numiți mai întâi „ Object.keys() ” pentru a obține matricea cheilor obiectului și apoi utilizați „ pentru fiecare() ” pentru a itera prin matrice și în cele din urmă apelați „ setAttribute() ” pentru a seta toate atributele definite pe elementul HTML specificat.
set de funcțiiMultipleAttributesonElement ( element, elementAttribute ) {Obiect . chei ( elementAtribute ) . pentru fiecare ( atribut => {
element. setAttribute ( atribut, elemAttribute [ atribut ] ) ;
} ) ;
}
Preluați butonul folosind id-ul atribuit cu ajutorul „ getElementById() ” metoda:
const buton = document. getElementById ( 'buton' ) ;Invocați funcția definită „ set MultipleAttributesonElement ” și treceți elementul ca prim argument și obiectul atributelor ca al doilea argument:
set MultipleAttributesonElement ( buton, elementAtribute ) ;Rezultatul arată că atributele multiple ale unui buton sunt adăugate cu succes:
De asemenea, puteți seta mai multe atribute pe un element fără a crea un obiect separat pentru atribute. Pentru a face acest lucru, urmați exemplul de mai jos.
Exemplul 2: Setați mai multe atribute pe un element utilizând for Loop cu metoda setAttribute()
Definiți o funcție cu doi parametri într-un fișier JavaScript și utilizați o buclă for pentru a seta mai multe atribute în interiorul acesteia apelând „ setAttribute() ” metoda:
set de funcțiiMultipleAttributesonElement ( element, elementAttribute ) {pentru ( lasă-i în elemAttributes ) {
element. setAttribute ( i, elemAttributes [ i ] ) ;
}
}
Preluați butonul folosind id-ul atribuit:
const buton = document. getElementById ( 'buton' ) ;Apelați funcția definită prin trecerea elementului buton și a mai multor atribute sub formă de perechi nume-valoare:
set MultipleAttributesonElement ( buton, { 'stil' : 'culoare de fundal: rgb(153, 28, 49); culoare: alb;' , 'dezactivat' : '' , 'Nume' : „LinuxButton” } ) ;Ieșire
Am compilat toate informațiile esențiale legate de setarea atributelor multiple pe un element HTML folosind JavaScript.
Concluzie
JavaScript predefinit setAttribute() ” este folosită pentru a seta atribute unice sau multiple pentru un element. Pentru a seta atributele multiple pe un element, mai întâi, creați un obiect care conține atribute sub formă de nume-valori. Obțineți cheile obiectelor dintr-o matrice folosind „ Object.keys() ”, apoi setați toate atributele elementelor specificate cu „ setAttribute() ” metoda. În această postare, am ilustrat procedura de setare a mai multor atribute pe un element HTML folosind JavaScript.