Set multiple Attributes to an Element using JavaScript

avatar

Borislav Hadzhiev

Fri Dec 31 20213 min read

banner

Photo by Tony Pham

Set multiple Attributes to an Element using JavaScript #

To set multiple attributes at once to an element:

  1. Add the attribute names and values to an object.
  2. Use the Object.keys() method to get an array of the object's keys.
  3. Use the forEach() method to iterate over the array of keys.
  4. Use the setAttribute() method to add each attribute and its value to the element.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <button id="btn">Button 1</button> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
function setAttributes(element, attributes) { Object.keys(attributes).forEach(attr => { element.setAttribute(attr, attributes[attr]); }); } const attributes = { name: 'example', title: 'Box 1', disabled: '', style: 'background-color: salmon; color: white;', }; const button = document.getElementById('btn'); setAttributes(button, attributes);

We created a reusable function that takes an element and an object of attribute names and values and adds them to the element.

We used the Object.keys() method to get an array of the attribute names.

index.js
const attributes = { name: 'example', title: 'Box 1', disabled: '', style: 'background-color: salmon; color: white;', }; // 👇️ ['name', 'title', 'disabled', 'style'] console.log(Object.keys(attributes));

The function we passed to the Array.forEach method gets called with each element in the array.

On each iteration, we used the setAttribute method to set an attribute to the element.

If the attribute already exists on the element, the value is updated, otherwise a new attribute is added with the specified value and name.

This means that when you use the setAttribute method you are setting or replacing attributes on the element.

For example, if the element already had a style attribute and you were to use the setAttribute method to update its style, you would replace the existing style with the provided value, they would not get merged.

A good thing to keep in mind is - when setting the value of a boolean attribute, such as disabled, we can specify any value for the attribute and it will work.

If the attribute is present at all, regardless of the value, its value is considered to be true.

If a boolean attribute, such as disabled, is not present, the value of the attribute is considered to be false.

This is why it is a best practice to set boolean attributes to an empty string, which sets the attribute on the element without a value.

If you need to remove an attribute from an element, you can use the removeAttribute() method.

index.js
const button = document.getElementById('btn'); button.removeAttribute('name');

If you need to remove multiple attributes from an element, you can use the same approach we used when adding multiple attributes.

This time things are a bit more straight forward since we only need the names of the attributes to be removed, so we can use an array instead of an object.

index.js
function removeAttributes(element, attributes) { attributes.forEach(attr => { element.removeAttribute(attr); }); } const attributes = ['name', 'title', 'disabled', 'style']; const button = document.getElementById('btn'); removeAttributes(button, attributes);

We stored the attribute names in an array and used the forEach method to iterate over the array.

On each iteration, we used the removeAttribute method to remove the attribute from the element.

Further Reading #

Use the search field on my Home Page to filter through my more than 1,000 articles.