Ez a bejegyzés bemutatja a több attribútum beállítását egy HTML-elemen JavaScript használatával.
Hogyan állíthatunk be több attribútumot egy elemhez JavaScript használatával?
Ha egy elemen egyszerre több attribútumot szeretne beállítani, először hozzon létre egy objektumot az attribútumnevekkel és értékekkel. Szerezze le az objektum kulcsainak listáját tömbként a ' Object.keys() ” metódussal, majd állítsa be az összes attribútumot a megadott HTML-elemen a „ setAttribute() ” módszerrel.
Szintaxis
A megadott szintaxis a setAttribute() metódushoz használatos:
elem. setAttribute ( attrName, attrValue ) ;
A fenti szintaxis két paramétert tartalmaz: ' név ” és „ érték ”.
- ' attrName ” az új attribútum neve.
- ' attrValue ” az új attribútum értéke.
- Ez a módszer új attribútumot hoz létre, és értéket rendel hozzá. Ha a megadott attribútum már létezik, akkor az értéke frissül.
Használja a megadott szintaxist az Object.keys() metódushoz:
Tárgy . kulcsok ( tárgy )Egy adott objektum tömbjét adja vissza.
1. példa: Állítson be több attribútumot egy elemen a forEach() metódus használatával a setAttribute() metódussal
Először hozzon létre egy elemet a HTML-fájlban:
< gomb id = 'gomb' > LINUXHINT gomb >Jelenleg a weboldal így fog kinézni:
A JavaScript kódban először hozzon létre egy ' nevű objektumot elemAttribútumok ” és adja hozzá az attribútumokat nevekkel és értékekkel az objektumhoz. Itt hozzáadjuk a style attribútumot, az elem nevét és a gombelem disable tulajdonságát:
const elemAttribútumok = {stílus : 'háttérszín: rgb(153, 28, 49); fehér szín;' ,
név : 'LinuxButton' ,
Tiltva : '' ,
} ;
Most definiáljon egy '' nevű függvényt setMultipleAttributesonElement ' ahol először hívja a ' Object.keys() ” módszert az objektum kulcsainak tömbjének lekéréséhez, majd használja a „ az egyes() ' metódus a tömb iterálásához, és végül meghívja a ' setAttribute() ” metódussal állíthatja be az összes definiált attribútumot a megadott HTML elemen.
függvény setMultipleAttributesonElement ( elem, elemAttributes ) {Tárgy . kulcsok ( elemAttribútumok ) . az egyes ( tulajdonság => {
elem. setAttribute ( attribútum, elemAttributes [ tulajdonság ] ) ;
} ) ;
}
Hozza le a gombot a hozzárendelt azonosítóval a „ getElementById() ” módszer:
const gomb = dokumentum. getElementById ( 'gomb' ) ;A definiált függvény meghívása ' setMultipleAttributesonElement ” és adja át az elemet első argumentumként és az attribútumok tárgyát második argumentumként:
setMultipleAttributesonElement ( gomb, elemAttribútumok ) ;A kimenet azt mutatja, hogy egy gomb több attribútuma sikeresen hozzáadva:
Több attribútumot is beállíthat egy elemhez anélkül, hogy külön objektumot hozna létre az attribútumokhoz. Ehhez kövesse az alábbi példát.
2. példa: Állítson be több attribútumot egy elemen a for Loop segítségével a setAttribute() metódussal
Határozzon meg egy függvényt két paraméterrel egy JavaScript fájlban, és használja a for ciklust több attribútum beállításához a ' setAttribute() ” módszer:
függvény setMultipleAttributesonElement ( elem, elemAttributes ) {számára ( hadd i in elemAttributes ) {
elem. setAttribute ( i, elemAttributes [ én ] ) ;
}
}
Töltse le a gombot a hozzárendelt azonosítójával:
const gomb = dokumentum. getElementById ( 'gomb' ) ;Hívja meg a definiált függvényt a gombelem és több attribútum átadásával név-érték párok formájában:
setMultipleAttributesonElement ( gomb, { 'stílus' : 'háttérszín: rgb(153, 28, 49); szín: fehér;' , 'Tiltva' : '' , 'név' : 'LinuxButton' } ) ;Kimenet
Összegyűjtöttünk minden lényeges információt egy HTML-elem több attribútumának JavaScript használatával történő beállításához.
Következtetés
Az előre meghatározott JavaScript setAttribute() ” metódus használható egyetlen vagy több attribútum beállítására egy elemhez. Ha több attribútumot szeretne beállítani egy elemen, először hozzon létre egy objektumot, amely nevek-értékek formájában tartalmazza az attribútumokat. Szerezze meg az objektumok kulcsait egy tömbben a „ Object.keys() ” metódussal, majd állítsa be az összes attribútumot a megadott elemeken a „ setAttribute() ” módszerrel. Ebben a bejegyzésben bemutattuk azt az eljárást, amellyel több attribútumot állíthatunk be egy HTML-elemhez JavaScript használatával.