Questo post illustrerà la procedura per impostare gli attributi multipli su un elemento HTML utilizzando JavaScript.
Come impostare più attributi su un elemento utilizzando JavaScript?
Per impostare più attributi su un elemento contemporaneamente, creare innanzitutto un oggetto con i nomi e i valori degli attributi. Ottieni un elenco delle chiavi dell'oggetto come un array con ' Oggetto.keys() ” metodo, quindi, imposta tutti gli attributi sull'elemento HTML specificato con il “ impostaAttributo() ' metodo.
Sintassi
La sintassi data viene utilizzata per il metodo setAttribute():
elemento. setAttribute ( attrName, attrValue ) ;
La sintassi precedente contiene due parametri: “ nome ' e ' valore ”.
- “ attrNome ” è il nome del nuovo attributo.
- “ attrValore ” è il valore del nuovo attributo.
- Questo metodo creerà un nuovo attributo e gli assegnerà un valore. Se l'attributo specificato esiste già, il suo valore verrà aggiornato.
Usa la sintassi data per il metodo Object.keys():
Oggetto . chiavi ( oggetto )Restituisce un array di un dato oggetto.
Esempio 1: impostare più attributi su un elemento utilizzando il metodo forEach() con il metodo setAttribute()
Innanzitutto, crea un elemento nel file HTML:
< ID pulsante = 'pulsante' > SUGGERIMENTO PER LINUX pulsante >Attualmente, la pagina web sarà simile a questa:
Nel codice JavaScript, innanzitutto, crea un oggetto denominato ' elementAttributi ” e aggiungere gli attributi con nomi e valori all'oggetto. Qui aggiungeremo l'attributo style, il nome dell'elemento e la proprietà disable per l'elemento button:
cost elementAttributi = {stile : 'colore di sfondo: rgb(153, 28, 49); colore bianco;' ,
nome : 'Pulsante Linux' ,
Disabilitato : '' ,
} ;
Ora, definisci una funzione chiamata ' setMultipleAttributesonElement ” dove prima chiama il “ Oggetto.keys() ' metodo per ottenere l'array delle chiavi dell'oggetto e quindi utilizzare il ' per ciascuno() ” per scorrere l'array e infine chiamare il metodo “ impostaAttributo() ” per impostare tutti gli attributi definiti sull'elemento HTML specificato.
funzione setMultipleAttributesonElement ( elemento, elementoAttributi ) {Oggetto . chiavi ( elementAttributi ) . per ciascuno ( attributo => {
elemento. setAttribute ( attributo, elemAttributes [ attributo ] ) ;
} ) ;
}
Recupera il pulsante utilizzando l'ID assegnato con l'aiuto del ' getElementById() ' metodo:
cost pulsante = documento. getElementById ( 'pulsante' ) ;Invoca la funzione definita ' setMultipleAttributesonElement ” e passare l'elemento come primo argomento e l'oggetto degli attributi come secondo argomento:
setMultipleAttributesonElement ( pulsante, elementAttributes ) ;L'output mostra che gli attributi multipli di un pulsante sono stati aggiunti correttamente:
Puoi anche impostare più attributi su un elemento senza creare un oggetto separato per gli attributi. Per fare ciò, seguire l'esempio seguente.
Esempio 2: impostare più attributi su un elemento utilizzando il ciclo for con il metodo setAttribute()
Definisci una funzione con due parametri in un file JavaScript e utilizza un ciclo for per impostare più attributi al suo interno chiamando il metodo ' impostaAttributo() ' metodo:
funzione setMultipleAttributesonElement ( elemento, elementoAttributi ) {per ( let i in elemAttributes ) {
elemento. setAttribute ( i, elemAttributes [ io ] ) ;
}
}
Recupera il pulsante utilizzando l'ID assegnato:
cost pulsante = documento. getElementById ( 'pulsante' ) ;Chiama la funzione definita passando l'elemento button e più attributi sotto forma di coppie nome-valore:
setMultipleAttributesonElement ( pulsante, { 'stile' : 'colore-sfondo: rgb(153, 28, 49); colore: bianco;' , 'Disabilitato' : '' , 'nome' : 'Pulsante Linux' } ) ;Produzione
Abbiamo raccolto tutte le informazioni essenziali relative all'impostazione degli attributi multipli su un elemento HTML utilizzando JavaScript.
Conclusione
Il codice JavaScript predefinito impostaAttributo() Il metodo ” viene utilizzato per impostare attributi singoli o multipli per un elemento. Per impostare gli attributi multipli su un elemento, creare innanzitutto un oggetto che contenga attributi sotto forma di nomi-valori. Ottieni le chiavi degli oggetti in un array usando ' Oggetto.keys() ', quindi impostare tutti gli attributi sugli elementi specificati con il metodo ' impostaAttributo() ' metodo. In questo post abbiamo illustrato la procedura per impostare più attributi su un elemento HTML utilizzando JavaScript.