This post will illustrate the procedure to set the multiple attributes on an HTML element using JavaScript.
How to Set Multiple Attributes on an Element Using JavaScript?
To set multiple attributes on an element simultaneously, first, create an object with the attribute names and values. Get a list of the object’s keys as an array with the “Object.keys()” method, then, set all the attributes on the specified HTML element with the “setAttribute()” method.
Syntax
The given syntax is used for the setAttribute() method:
The above syntax contains two parameters: “name” and “value”.
- “attrName” is the name of the new attribute.
- “attrValue” is the value of the new attribute.
- This method will create a new attribute and assign it a value. If the specified attribute already exists, then its value will get updated.
Use the given syntax for the Object.keys() method:
It returns an array of a given object.
Example 1: Set Multiple Attributes on an Element Using forEach() Method With setAttribute() Method
First, create an element in the HTML file:
Currently, the web page will look like this:
In JavaScript code, first, create an object named “elementAttributes” and add the attributes with names and values to the object. Here, we will add the style attribute, the name of the element, and the disable property for the button element:
style: 'background-color: rgb(153, 28, 49); color: white;',
name: 'LinuxButton',
disabled: '',
};
Now, define a function named “setMultipleAttributesonElement” where first call the “Object.keys()” method for getting the array of the object’s keys and then utilize the “forEach()” method to iterate through the array and finally call the “setAttribute()” method to set all the defined attributes on the specified HTML element.
Object.keys(elementAttributes).forEach(attribute => {
elem.setAttribute(attribute, elemAttributes[attribute]);
});
}
Fetch the button using its assigned id with the help of the “getElementById()” method:
Invoke the defined function “setMultipleAttributesonElement” and pass the element as the first argument and the object of attributes as the second argument:
The output shows that the multiple attributes of a button are successfully added:
You can also set multiple attributes on an element without creating a separate object for the attributes. To do this, follow the below example.
Example 2: Set Multiple Attributes on an Element Using for Loop With setAttribute() Method
Define a function with two parameters in a JavaScript file and use a for loop to set multiple attributes inside it by calling the “setAttribute()” method:
for(let i in elemAttributes) {
elem.setAttribute(i, elemAttributes[i]);
}
}
Retrieve the button using its assigned id:
Call the defined function by passing the button element and multiple attributes in the form of name-value pairs:
Output
We have compiled all the essential information related to setting the multiple attributes on an HTML element using JavaScript.
Conclusion
The JavaScript predefined setAttribute()” method is used to set single or multiple attributes for an element. To set the multiple attributes on an element, first, create an object that contains attributes in the form of names-values. Get the keys of objects in an array using the “Object.keys()” method, then set all the attributes on the specified elements with the “setAttribute()” method. In this post, we have illustrated the procedure to set multiple attributes on an HTML element using JavaScript.
