How to Use setAttribute in JavaScript

Attributes are components of HTML tags which can be used to help control the behavior of the element to which they are assigned.

Some attributes apply to all HTML elements (e.g. all fields can have an id attribute), while others only work for specific elements (e.g. the attribute action is only available on the <form> tag).

Attributes can help us assign a style to a tag; disable a button; change the tag’s type, and more. Manipulating an element’s attributes in JavaScript is straightforward. First, a specific element is required. Some DOM queries return an array of elements (e.g. NodeList), the JavaScript functions we’re working with only operate with a single element. Thus, you need to make sure to either use queries that return a single element, or use an index to get a single value out of an array of elements.

Once you have a single HTML element to work with, you can use the following functions to manipulate that element’s attributes:

• To get the current value of an attribute, use getAttribute()
• To remove an attribute, call removeAttribute()

Let’s explore these functions using some sample code:

HTML

<h1 class="example">
  Hello!
</h1>

CSS

.red-txt {
  color: red;
}

JavaScript

const example = document.getElementsByClassName('example')[0];
example.setAttribute('class', 'red-txt');

In the above example, we define a single <h1> element to contain the text we want to render. The variable const example uses the function getElementsByClassName, which returns an array of elements by default (this is even implied in the function name, by using the word “Elements”). We grab the first element of the array by pulling the element at index zero ([0]). With a single element now stored in the variable example, we can now use setAttribute to modify the element. In the example above, the <h1> element we have identified receives an update to its class attribute, as the value is set to red-txt. Due to our CSS styling, ‘Hello!’ will appear red on the user’s screen.

Syntax

The setAttribute function has the following syntax:

Element.setAttribute(name, value)

The parameters to this call are:

• name – String – the name of the attribute to be added (i.e. name of an existing attribute).
• value – String – the value of the attribute (Note: Each attribute has a set of valid values that must be adhered to).

Return value – undefined.

The syntax for getAttribute is similar:

Element.getAttribute(name)

This call has a single parameter:

• name – String – the name of the attribute to get its value.

Return value – a string containing the current value of the requested attribute.

Change placeholder value using setAttribute

Let’s look at a second example. This example replaces placeholder text in an HTML element using setAttribute:

HTML

<input type="text" placeholder="Enter text">

JavaScript

const userInput = document.querySelector('input');
userInput.setAttribute('placeholder', 'Welcome!');

The above code defines an input element with placeholder text that reads: ‘Enter text’. After applying setAttribute, the element now contains the text ‘Welcome!’.

Note: There was no need to use an index in the above code, as the return value from document.querySelector is a single element. Contrast this with document.querySelectorAll, which returns an array of elements.

Change Image src using setAttribute

Our final example uses setAttribute to change the src attribute of an image element:

HTML

<img src="/imgs/add.png" id='img1'>

JavaScript

const img1 = document.getElementById('img1');
img1.setAttribute('src', '/imgs/2-arrows.png');

In the above example, the <img> element first pointed to “/imgs/add.png”, displaying the image on the rendered document. The setAttribute function changed the location used by the src attribute to “/imgs/2-arrows.png”, causing the element to pull its image from the new location and updating the document to display the image stored at the new location.

Related Articles:

JavaScript – How to Change CSS

JavaScript – How to Change the Background Color

JavaScript – How to Change The Page URL