Tento příspěvek bude ilustrovat postup nastavení více atributů v prvku HTML pomocí JavaScriptu.
Jak nastavit více atributů u prvku pomocí JavaScriptu?
Chcete-li nastavit více atributů na prvku současně, nejprve vytvořte objekt s názvy a hodnotami atributů. Získejte seznam klíčů objektu jako pole s ' Object.keys() “, poté nastavte všechny atributy na zadaném HTML elementu pomocí “ setAttribute() “ metoda.
Syntax
Daná syntaxe se používá pro metodu setAttribute():
živel. setAttribute ( attrName, attrValue ) ;
Výše uvedená syntaxe obsahuje dva parametry: “ název ' a ' hodnota “.
- “ attrName ” je název nového atributu.
- “ attrValue ” je hodnota nového atributu.
- Tato metoda vytvoří nový atribut a přiřadí mu hodnotu. Pokud zadaný atribut již existuje, bude jeho hodnota aktualizována.
Použijte danou syntaxi pro metodu Object.keys():
Objekt . klíče ( objekt )Vrací pole daného objektu.
Příklad 1: Nastavení více atributů u prvku pomocí metody forEach() s metodou setAttribute()
Nejprve vytvořte prvek v souboru HTML:
< ID tlačítka = 'knoflík' > LINUXHINT knoflík >Aktuálně bude webová stránka vypadat takto:
V kódu JavaScript nejprve vytvořte objekt s názvem „ elementAtributes ” a přidejte k objektu atributy s názvy a hodnotami. Zde přidáme atribut style, název prvku a vlastnost disable pro prvek button:
konst elementAtributes = {styl : 'barva pozadí: rgb(153, 28, 49); barva bílá;' ,
název : 'LinuxButton' ,
zakázáno : '' ,
} ;
Nyní definujte funkci s názvem „ setMultipleAttributesonElement “, kde nejprve zavolejte „ Object.keys() “ metodu pro získání pole klíčů objektu a poté použijte “ pro každého() ” metodu pro iteraci pole a nakonec zavolání “ setAttribute() ” pro nastavení všech definovaných atributů na zadaný HTML element.
funkce setMultipleAttributesonElement ( element, elementAtributes ) {Objekt . klíče ( elementAtributes ) . pro každého ( atribut => {
živel. setAttribute ( atribut, elemAttributes [ atribut ] ) ;
} ) ;
}
Načtěte tlačítko pomocí jeho přiřazeného ID pomocí „ getElementById() “ metoda:
konst knoflík = dokument. getElementById ( 'knoflík' ) ;Vyvolejte definovanou funkci ' setMultipleAttributesonElement ” a předejte prvek jako první argument a objekt atributů jako druhý argument:
setMultipleAttributesonElement ( button, elementAtributes ) ;Výstup ukazuje, že více atributů tlačítka bylo úspěšně přidáno:
Na prvek můžete také nastavit více atributů, aniž byste pro atributy vytvořili samostatný objekt. Chcete-li to provést, postupujte podle níže uvedeného příkladu.
Příklad 2: Nastavení více atributů na prvku pomocí metody setAttribute() pomocí pro smyčku
Definujte funkci se dvěma parametry v souboru JavaScript a použijte smyčku for k nastavení více atributů uvnitř ní voláním „ setAttribute() “ metoda:
funkce setMultipleAttributesonElement ( element, elementAtributes ) {pro ( nechejte i v elemAttributes ) {
živel. setAttribute ( i, elemAtributes [ i ] ) ;
}
}
Získejte tlačítko pomocí přiřazeného ID:
konst knoflík = dokument. getElementById ( 'knoflík' ) ;Zavolejte definovanou funkci předáním prvku button a více atributů ve formě párů název-hodnota:
setMultipleAttributesonElement ( knoflík, { 'styl' : 'barva pozadí: rgb(153, 28, 49); barva: bílá;' , 'zakázáno' : '' , 'název' : 'LinuxButton' } ) ;Výstup
Sestavili jsme všechny podstatné informace související s nastavením více atributů na HTML elementu pomocí JavaScriptu.
Závěr
Předdefinovaný JavaScript setAttribute() ” metoda se používá k nastavení jednoho nebo více atributů pro prvek. Chcete-li nastavit více atributů na prvku, nejprve vytvořte objekt, který obsahuje atributy ve formě jmen-hodnot. Získejte klíče objektů v poli pomocí „ Object.keys() “, poté nastavte všechny atributy na zadaných prvcích pomocí „ setAttribute() “ metoda. V tomto příspěvku jsme ilustrovali postup nastavení více atributů v prvku HTML pomocí JavaScriptu.