Aquesta publicació il·lustrarà el procediment per establir els múltiples atributs d'un element HTML mitjançant JavaScript.
Com establir diversos atributs en un element mitjançant JavaScript?
Per establir diversos atributs en un element simultàniament, primer, creeu un objecte amb els noms i els valors dels atributs. Obteniu una llista de les claus de l'objecte com a matriu amb el ' Object.keys() ', aleshores, establiu tots els atributs de l'element HTML especificat amb el ' setAttribute() ” mètode.
Sintaxi
La sintaxi donada s'utilitza per al mètode setAttribute():
element. setAttribute ( attrName, attrValue ) ;
La sintaxi anterior conté dos paràmetres: ' nom ' i ' valor ”.
- “ attrName ” és el nom del nou atribut.
- “ attrValue ” és el valor del nou atribut.
- Aquest mètode crearà un nou atribut i li assignarà un valor. Si l'atribut especificat ja existeix, el seu valor s'actualitzarà.
Utilitzeu la sintaxi donada per al mètode Object.keys():
Objecte . claus ( objecte )Retorna una matriu d'un objecte determinat.
Exemple 1: establiu diversos atributs en un element utilitzant el mètode forEach() amb el mètode setAttribute()
Primer, creeu un element al fitxer HTML:
< identificador del botó = 'botó' > LINUXHINT botó >Actualment, la pàgina web tindrà aquest aspecte:
Al codi JavaScript, primer, creeu un objecte anomenat ' elementAtributs ” i afegiu els atributs amb noms i valors a l'objecte. Aquí, afegirem l'atribut d'estil, el nom de l'element i la propietat desactivar per a l'element botó:
const elementAtributs = {estil : 'color de fons: rgb(153, 28, 49); color: blanc;' ,
nom : 'LinuxButton' ,
discapacitat : '' ,
} ;
Ara, definiu una funció anomenada ' setMultipleAttributesonElement ' on primer crida el ' Object.keys() ” mètode per obtenir la matriu de claus de l'objecte i després utilitzar el “ per cadascú() ” mètode per iterar a través de la matriu i finalment cridar el “ setAttribute() ” mètode per establir tots els atributs definits a l'element HTML especificat.
conjunt de funcionsMultipleAttributesonElement ( element, elementAtributs ) {Objecte . claus ( elementAtributs ) . per cadascú ( atribut => {
element. setAttribute ( atribut, elemAttributs [ atribut ] ) ;
} ) ;
}
Obteniu el botó utilitzant el seu identificador assignat amb l'ajuda del ' getElementById() ” mètode:
const botó = document. getElementById ( 'botó' ) ;Invoca la funció definida ' setMultipleAttributesonElement ” i passa l'element com a primer argument i l'objecte d'atributs com a segon argument:
setMultipleAttributesonElement ( botó, elementAtributs ) ;La sortida mostra que els múltiples atributs d'un botó s'han afegit correctament:
També podeu establir diversos atributs en un element sense crear un objecte separat per als atributs. Per fer-ho, seguiu l'exemple següent.
Exemple 2: establiu diversos atributs en un element utilitzant for Loop amb el mètode setAttribute()
Definiu una funció amb dos paràmetres en un fitxer JavaScript i utilitzeu un bucle for per establir diversos atributs dins d'ella cridant al ' setAttribute() ” mètode:
conjunt de funcionsMultipleAttributesonElement ( element, elementAtributs ) {per ( deixeu-me a elemAttributes ) {
element. setAttribute ( i, elemAttributs [ i ] ) ;
}
}
Recupereu el botó amb el seu identificador assignat:
const botó = document. getElementById ( 'botó' ) ;Truqueu a la funció definida passant l'element botó i diversos atributs en forma de parells nom-valor:
setMultipleAttributesonElement ( botó, { 'estil' : 'color de fons: rgb(153, 28, 49); color: blanc;' , 'discapacitat' : '' , 'nom' : 'LinuxButton' } ) ;Sortida
Hem recopilat tota la informació essencial relacionada amb la configuració dels múltiples atributs d'un element HTML mitjançant JavaScript.
Conclusió
El JavaScript predefinit setAttribute() ” s'utilitza per establir atributs únics o múltiples per a un element. Per establir els múltiples atributs d'un element, primer, creeu un objecte que contingui atributs en forma de noms-valors. Obteniu les claus dels objectes d'una matriu utilitzant el ' Object.keys() ” i, a continuació, establiu tots els atributs dels elements especificats amb el “ setAttribute() ” mètode. En aquesta publicació, hem il·lustrat el procediment per establir diversos atributs en un element HTML mitjançant JavaScript.