Définir plusieurs attributs sur un élément à l'aide de JavaScript

Les attributs définissent des caractéristiques ou des propriétés supplémentaires d'un élément HTML, telles que la couleur, la largeur, la hauteur, etc. Pour fournir un attribut à l'élément, les paires de valeurs de nom, telles que «nom = valeur», Sont utilisés où la valeur de l'attribut doit être enfermé dans des guillemets. Ainsi, pour définir la valeur d'un attribut sur l'élément spécifié, utilisez le "Élément.setAttribute ()" méthode.

Ce message illustra la procédure pour définir les multiples attributs sur un élément HTML à l'aide de JavaScript.

Comment définir plusieurs attributs sur un élément à l'aide de JavaScript?

Pour définir plusieurs attributs sur un élément simultanément, créez d'abord un objet avec les noms et valeurs d'attribut. Obtenez une liste des clés de l'objet en tant que tableau avec le «Objet.clés()»Méthode, alors, définissez tous les attributs de l'élément HTML spécifié avec le«setAttribute ()" méthode.

Syntaxe

La syntaxe donnée est utilisée pour la méthode setAttribute ():

élément.setAttribute (attName, attvAlue);

La syntaxe ci-dessus contient deux paramètres: «nom" et "valeur".

• "nommer"Est le nom du nouvel attribut.
• "attaquer«Est la valeur du nouvel attribut.
• Cette méthode créera un nouvel attribut et lui attribuera une valeur. Si l'attribut spécifié existe déjà, sa valeur sera mise à jour.

Utilisez la syntaxe donnée pour l'objet.Méthode Keys ():

Objet.touches (objet)

Il renvoie un tableau d'un objet donné.

Exemple 1: Définissez plusieurs attributs sur un élément utilisant la méthode foreach () avec la méthode SetAttribute ()

Créez d'abord un élément dans le fichier html:

Linuxhint

Actuellement, la page Web ressemblera à ceci:

Dans le code JavaScript, créez d'abord un objet nommé «ElementAttributes»Et ajoutez les attributs avec des noms et des valeurs à l'objet. Ici, nous ajouterons l'attribut de style, le nom de l'élément et la propriété Désactiver pour l'élément bouton:

const elementAtTributes =
Style: «Color en arrière-plan: RVB (153, 28, 49); Couleur blanche;',
Nom: «Linuxbutton»,
désactivé: ",
;

Maintenant, définissez une fonction nommée «setMultipleAtTributesOnElement«Où appelle d'abord le«Objet.clés()”Méthode pour obtenir le tableau des clés de l'objet, puis utilisez le"pour chaque()«Méthode pour itérer dans le tableau et enfin appeler le«setAttribute ()”Méthode pour définir tous les attributs définis sur l'élément HTML spécifié.

fonction setMultipleAtTributesOnElement (elem, elemattributes)
Objet.touches (elementAttributes).foreach (attribut =>
elem.setAttribute (attribut, elemAttributes [attribut]);
);

Remplissez le bouton en utilisant son ID attribué à l'aide du "getElementByid ()" méthode:

const Button = document.getElementById ('bouton');

Invoque la fonction définie "setMultipleAtTributesOnElement»Et passez l'élément comme le premier argument et l'objet d'attributs comme deuxième argument:

setMultipleAtTributesOnElement (bouton, elementAttributes);

La sortie montre que les multiples attributs d'un bouton sont ajoutés avec succès:

Vous pouvez également définir plusieurs attributs sur un élément sans créer un objet séparé pour les attributs. Pour ce faire, suivez l'exemple ci-dessous.

Exemple 2: Définissez plusieurs attributs sur un élément utilisant pour Loop avec SetAttribute () Méthode

Définissez une fonction avec deux paramètres dans un fichier JavaScript et utilisez une boucle pour définir plusieurs attributs à l'intérieur en appelant le «setAttribute ()" méthode:

fonction setMultipleAtTributesOnElement (elem, elemattributes)
pour (que je dans elemattributes)
elem.setAttribute (i, elemattributes [i]);

Récupérez le bouton en utilisant son ID attribué:

const Button = document.getElementById ('bouton');

Appelez la fonction définie en passant l'élément bouton et plusieurs attributs sous la forme de paires de valeurs de nom:

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

Sortir

Nous avons compilé toutes les informations essentielles liées à la définition des multiples attributs sur un élément HTML à l'aide de JavaScript.

Conclusion

Le javascript prédéfini setAttribute ()«La méthode est utilisée pour définir des attributs uniques ou multiples pour un élément. Pour définir les multiples attributs sur un élément, créez d'abord un objet qui contient des attributs sous la forme de noms de noms. Obtenez les clés des objets dans un tableau en utilisant le «Objet.clés()«Méthode, puis définissez tous les attributs sur les éléments spécifiés avec le«setAttribute ()" méthode. Dans cet article, nous avons illustré la procédure pour définir plusieurs attributs sur un élément HTML en utilisant JavaScript.