Cet article illustrera 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 simultanément plusieurs attributs sur un élément, commencez par créer un objet avec les noms et les valeurs des attributs. Obtenez une liste des clés de l'objet sous forme de tableau avec le ' Objet.keys() ', puis définissez tous les attributs sur 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 ( attrName, attrValue ) ;
La syntaxe ci-dessus contient deux paramètres : ' Nom ' et ' évaluer ”.
- ' attrName ” est le nom du nouvel attribut.
- ' valeurattr ” 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 la méthode Object.keys() :
Objet . clés ( objet )Il renvoie un tableau d'un objet donné.
Exemple 1 : Définir plusieurs attributs sur un élément à l'aide de la méthode forEach() avec la méthode setAttribute()
Commencez par créer un élément dans le fichier HTML :
< identifiant du bouton = 'bouton' > LINUXHINT bouton >Actuellement, la page Web ressemblera à ceci :
Dans le code JavaScript, créez d'abord un objet nommé ' Attributsélément ” et ajoutez les attributs avec les noms et les valeurs à l'objet. Ici, nous ajouterons l'attribut style, le nom de l'élément et la propriété disable pour l'élément button :
constante Attributsélément = {style : 'couleur de fond : rgb (153, 28, 49); Couleur blanche;' ,
Nom : 'LinuxButton' ,
désactivé : '' ,
} ;
Maintenant, définissez une fonction nommée ' setMultipleAttributesonElement ' où d'abord appeler le ' Objet.keys() ' pour obtenir le tableau des clés de l'objet, puis utilisez la ' pour chaque() ” pour parcourir le tableau et enfin appeler la méthode “ setAttribute() ” pour définir tous les attributs définis sur l'élément HTML spécifié.
fonction setMultipleAttributesonElement ( élément, élémentAttributs ) {Objet . clés ( Attributsélément ) . pour chaque ( attribut => {
élément. setAttribute ( attribut, elemAttributs [ attribut ] ) ;
} ) ;
}
Récupérez le bouton en utilisant son identifiant attribué à l'aide du ' getElementById() ' méthode:
constante bouton = document. getElementById ( 'bouton' ) ;Appelez la fonction définie ' setMultipleAttributesonElement ” et passez l'élément en premier argument et l'objet des attributs en second argument :
setMultipleAttributesonElement ( bouton, élémentAttributs ) ;La sortie montre que les multiples attributs d'un bouton ont été ajoutés avec succès :
Vous pouvez également définir plusieurs attributs sur un élément sans créer d'objet distinct pour les attributs. Pour ce faire, suivez l'exemple ci-dessous.
Exemple 2 : Définir plusieurs attributs sur un élément à l'aide de la boucle for avec la méthode setAttribute()
Définissez une fonction avec deux paramètres dans un fichier JavaScript et utilisez une boucle for pour définir plusieurs attributs à l'intérieur en appelant le ' setAttribute() ' méthode:
fonction setMultipleAttributesonElement ( élément, élémentAttributs ) {pour ( laissez-moi dans elemAttributes ) {
élément. setAttribute ( i, elemAttributs [ je ] ) ;
}
}
Récupérez le bouton à l'aide de son identifiant :
constante bouton = document. getElementById ( 'bouton' ) ;Appelez la fonction définie en transmettant l'élément bouton et plusieurs attributs sous la forme de paires nom-valeur :
setMultipleAttributesonElement ( bouton, { 'style' : 'couleur d'arrière-plan : rgb (153, 28, 49); couleur : blanc ;' , 'désactivé' : '' , 'Nom' : 'Bouton Linux' } ) ;Production
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 un ou plusieurs attributs pour un élément. Pour définir les multiples attributs d'un élément, créez d'abord un objet contenant des attributs sous la forme de noms-valeurs. Obtenez les clés des objets dans un tableau en utilisant le ' Objet.keys() ', puis définissez tous les attributs sur les éléments spécifiés avec la méthode' setAttribute() ' méthode. Dans cet article, nous avons illustré la procédure pour définir plusieurs attributs sur un élément HTML à l'aide de JavaScript.