Imposta più attributi su un elemento usando JavaScript

Gli attributi definiscono funzionalità o proprietà aggiuntive di un elemento HTML, come colore, larghezza, altezza e così via. Per fornire un attributo all'elemento, coppie di valore di nome, come "nome = valore", Sono usati dove il valore dell'attributo dovrebbe essere racchiuso nelle virgolette. Quindi, per impostare il valore di un attributo sull'elemento specificato, utilizzare "Elemento.setAttribute ()" metodo.

Questo post illustrerà la procedura per impostare i più attributi su un elemento HTML usando JavaScript.

Come impostare più attributi su un elemento usando JavaScript?

Per impostare più attributi su un elemento contemporaneamente, prima, crea un oggetto con i nomi e i valori degli attributi. Ottieni un elenco delle chiavi dell'oggetto come un array con "Oggetto.tasti ()"Metodo, quindi, imposta tutti gli attributi sull'elemento HTML specificato con"setAttribute ()" metodo.

Sintassi

La sintassi data viene utilizzata per il metodo setAttribute ():

elemento.setAttribute (attrname, attrValue);

La sintassi sopra contiene due parametri: "nome" E "valore".

• "attrname"È il nome del nuovo attributo.
• "AttrValue"È il valore del nuovo attributo.
• Questo metodo creerà un nuovo attributo e gli assegnerà un valore. Se esiste già l'attributo specificato, il suo valore verrà aggiornato.

Usa la sintassi data per l'oggetto.Metodo Keys ():

Oggetto.tasti (oggetto)

Restituisce una matrice di un determinato oggetto.

Esempio 1: impostare più attributi su un elemento usando il metodo Foreach () con il metodo setAttribute ()

Innanzitutto, crea un elemento nel file HTML:

Linuxhint

Attualmente, la pagina Web sarà simile a questa:

Nel codice JavaScript, in primo luogo, crea un oggetto chiamato "Elementattributes"E aggiungi gli attributi con nomi e valori all'oggetto. Qui, aggiungeremo l'attributo di stile, il nome dell'elemento e la proprietà Disabilita per l'elemento pulsante:

const elementAttributes =
Stile: 'Background-color: RGB (153, 28, 49); colore bianco;',
Nome: "LinuxButton",
Disabilitato: ",
;

Ora, definisci una funzione chiamata "SetMultipleattributeSelement"Dove prima chiama il"Oggetto.tasti ()"Metodo per ottenere l'array delle chiavi dell'oggetto e quindi utilizzare il"per ciascuno()"Metodo per iterare attraverso l'array e infine chiamare il"setAttribute ()"Metodo per impostare tutti gli attributi definiti sull'elemento HTML specificato.

funzione setMultipleAttributeSeLement (Elem, Elemattributes)
Oggetto.tasti (elementattributes).foreach (attributo =>
Elem.setAttribute (attributo, elemattributes [attributo]);
);

Prendi il pulsante usando l'ID assegnato con l'aiuto di "getElementById ()" metodo:

CONST BOCKS = Documento.getElementById ('Button');

Invocare la funzione definita "SetMultipleattributeSelement"E passa l'elemento come primo argomento e l'oggetto degli attributi come secondo argomento:

setMultipleAttributeSeLement (pulsante, ElementaTtributes);

L'output mostra che gli attributi multipli di un pulsante vengono aggiunti correttamente:

È inoltre possibile impostare più attributi su un elemento senza creare un oggetto separato per gli attributi. Per fare questo, segui l'esempio seguente.

Esempio 2: imposta più attributi su un elemento utilizzando per loop con il metodo setAttribute ()

Definire una funzione con due parametri in un file JavaScript e utilizzare un ciclo per impostare più attributi al suo interno chiamando "setAttribute ()" metodo:

funzione setMultipleAttributeSeLement (Elem, Elemattributes)
per (let I in Elemattributes)
Elem.setAttribute (i, Elemattributes [i]);

Recupera il pulsante usando l'ID assegnato:

CONST BOCKS = Documento.getElementById ('Button');

Chiama la funzione definita passando l'elemento pulsante e più attributi sotto forma di coppie di valore di nome:

setMultipleAttributeSENelement (Button, "Style": "Background-Color: RGB (153, 28, 49); Color: White;", "Disabled": "", "Nome": "LinuxButton");

Produzione

Abbiamo compilato tutte le informazioni essenziali relative all'impostazione di più attributi su un elemento HTML usando JavaScript.

Conclusione

Il JavaScript predefinito setAttribute ()"Il metodo viene utilizzato per impostare attributi singoli o più per un elemento. Per impostare gli attributi multipli su un elemento, in primo luogo, crea un oggetto che contiene attributi sotto forma di valori di nomi. Ottieni le chiavi degli oggetti in un array usando il "Oggetto.tasti ()"Metodo, quindi imposta tutti gli attributi sugli elementi specificati con"setAttribute ()" metodo. In questo post, abbiamo illustrato la procedura per impostare più attributi su un elemento HTML usando JavaScript.