Tento príspevok ilustruje postup nastavenia viacerých atribútov v prvku HTML pomocou JavaScriptu.
Ako nastaviť viacero atribútov pre prvok pomocou JavaScriptu?
Ak chcete nastaviť viacero atribútov na prvku súčasne, najprv vytvorte objekt s názvami a hodnotami atribútov. Získajte zoznam kľúčov objektu ako pole s ' Object.keys() “, potom nastavte všetky atribúty na zadanom HTML elemente pomocou “ setAttribute() “.
Syntax
Daná syntax sa používa pre metódu setAttribute():
prvok. setAttribute ( attrName, attrValue ) ;
Vyššie uvedená syntax obsahuje dva parametre: “ názov “ a „ hodnotu “.
- “ attrName “ je názov nového atribútu.
- “ attrValue ” je hodnota nového atribútu.
- Táto metóda vytvorí nový atribút a priradí mu hodnotu. Ak zadaný atribút už existuje, jeho hodnota sa aktualizuje.
Použite danú syntax pre metódu Object.keys():
Objekt . kľúče ( objekt )Vráti pole daného objektu.
Príklad 1: Nastavenie viacerých atribútov na prvku pomocou metódy forEach() s metódou setAttribute()
Najprv vytvorte prvok v súbore HTML:
< ID tlačidla = 'tlačidlo' > LINUXHINT tlačidlo >V súčasnosti bude webová stránka vyzerať takto:
V kóde JavaScript najprv vytvorte objekt s názvom „ elementAttributes “ a pridajte atribúty s názvami a hodnotami k objektu. Tu pridáme atribút štýlu, názov prvku a vlastnosť disable pre prvok button:
konšt elementAttributes = {štýl : 'farba pozadia: rgb(153, 28, 49); farba: biela;' ,
názov : 'LinuxButton' ,
zdravotne postihnutých : '' ,
} ;
Teraz definujte funkciu s názvom „ setMultipleAttributesonElement “, kde najskôr zavolajte „ Object.keys() “ na získanie poľa kľúčov objektu a potom použite „ pre každý() ” na iteráciu cez pole a nakoniec zavolajte “ setAttribute() ” na nastavenie všetkých definovaných atribútov na zadanom prvku HTML.
function setMultipleAttributesonElement ( prvok, prvokAtribúty ) {Objekt . kľúče ( elementAttributes ) . pre každý ( atribút => {
prvok. setAttribute ( atribút, elemAtribúty [ atribút ] ) ;
} ) ;
}
Získajte tlačidlo pomocou priradeného ID pomocou „ getElementById() “ metóda:
konšt tlačidlo = dokument. getElementById ( 'tlačidlo' ) ;Vyvolajte definovanú funkciu ' setMultipleAttributesonElement ” a odovzdajte prvok ako prvý argument a objekt atribútov ako druhý argument:
setMultipleAttributesonElement ( tlačidlo, prvokAtribúty ) ;Výstup ukazuje, že viaceré atribúty tlačidla boli úspešne pridané:
Na element môžete tiež nastaviť viacero atribútov bez toho, aby ste pre atribúty vytvorili samostatný objekt. Postupujte podľa nižšie uvedeného príkladu.
Príklad 2: Nastavenie viacerých atribútov na prvku pomocou metódy setAttribute().
Definujte funkciu s dvoma parametrami v súbore JavaScript a použite cyklus for na nastavenie viacerých atribútov v ňom volaním „ setAttribute() “ metóda:
funkcia setMultipleAttributesonElement ( prvok, prvokAtribúty ) {pre ( nech v elemAttributes ) {
prvok. setAttribute ( i, elemAtribúty [ i ] ) ;
}
}
Získajte tlačidlo pomocou priradeného ID:
konšt tlačidlo = dokument. getElementById ( 'tlačidlo' ) ;Zavolajte definovanú funkciu odovzdaním prvku button a viacerých atribútov vo forme párov názov-hodnota:
setMultipleAttributesonElement ( tlačidlo, { 'štýl' : 'farba pozadia: rgb(153, 28, 49); farba: biela;' , 'zakázané' : '' , 'názov' : 'LinuxButton' } ) ;Výkon
Zhromaždili sme všetky základné informácie týkajúce sa nastavenia viacerých atribútov na prvku HTML pomocou JavaScriptu.
Záver
Preddefinovaný JavaScript setAttribute() ” metóda sa používa na nastavenie jedného alebo viacerých atribútov pre prvok. Ak chcete nastaviť viacero atribútov pre prvok, najprv vytvorte objekt, ktorý obsahuje atribúty vo forme názvov-hodnotov. Získajte kľúče objektov v poli pomocou „ Object.keys() “, potom nastavte všetky atribúty na špecifikovaných prvkoch pomocou „ setAttribute() “. V tomto príspevku sme ilustrovali postup nastavenia viacerých atribútov v prvku HTML pomocou JavaScriptu.