How to Change Attribute in JavaScript
This tutorial will discuss changing the attribute of an element using the setAttribute() function in JavaScript.
Change the Attribute of an Element Using the setAttribute() Function in JavaScript
We can change the attribute of an HTML element using the setAttribute() function in JavaScript.
Suppose the HTML element already has an attribute. In that case, the setAttribute() function will update the previous attribute, and if the HTML element does not have an attribute, the setAttribute() function will add a new attribute to the element.
The basic syntax of the setAttribute() function is below.
element.setAttribute(name, value)
The setAttribute() function accepts two arguments, name and value, as shown in the above syntax. The name argument is a string specifying the attribute’s name like class and id.
The value argument of the setAttribute() function is also a string, and it is used to set the value of the argument whose name is given as the first argument. The setAttribute() function does not return a value.
The element in the above syntax is the element whose attribute we want to set. We can get an HTML element in JavaScript using many functions like querySelector(), getElementById(), getElementByClassName(), and many more.
The basic syntax of all the above functions is given below.
const MyElement = document.querySelector(ElementName);
const MyElement = document.getElementById(ElementID);
const MyElement = document.getElementByClassName(ElementClassName);
In the above syntax, the querySelector() function accepts a string value that specifies the element’s name like div, h1, etc. The getElementById() function accepts a string value that specifies the element’s id, which we can give to any HTML element using the id keyword.
The getElementByClassName() function accepts a string value that specifies the element’s class name, which we can give to any HTML element using the class keyword. All the above functions return single and multiple elements if the input string of the function is used with multiple HTML elements.
In the case of multiple elements, the attribute of all the elements will change. If we want to set the attribute of a single element, we have to give each element a different class name or id.
For example, let’s set the class attribute of an element using the setAttribute() function. See the code below.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.test1 {
font-size: 50px;
color: blue;
}
.test2 {
font-size: 100px;
color: red;
}
</style>
</head>
<body>
<h1 id="id1" class="test1">set attribute</h1>
<script>
const MyElement = document.getElementById("id1");
MyElement.setAttribute("class", "test2");
</script>
</body>
</html>
Output:
In the above code, we have used the h1 tag to display a text and added an id and class name to the element. We have used the style tag to create two styles which we will use to change the attribute of the h1 tag.
We have used the script tag inside the body tag to write JavaScript code. Inside the script tag, we have used the getElementById() function to get the element using its id, and we have changed its class from test1 to test2 using the setAttribute() function.
We can see in the above output that the text’s color and font size have been changed.
Both styles, test1 and test2, contain different colors and font sizes. Inside the above code, we have given the class name test1 to the h1 tag, which contains blue color, but we have changed the class attribute to test2 inside the script tag, which is why the color of the output is red.
In the above code, we have changed the class attribute, but we can also change other attributes like the id or name attribute of an element. We can use the getAttribute() function to get the attribute of an element, and we can use the removeAttribute() function to remove the existing attribute of an element.
