The setAttribute function is utilized to define or append an attribute to a specific element, along with assigning a corresponding value. In cases where the attribute is already present, it simply updates or alters its value. Therefore, the setAttribute function can also be employed to modify the value of an existing attribute. If the specified attribute is not present, it will generate a new attribute with the given name and value. This function does not yield any return value. Additionally, when applied to an HTML element, the attribute name is automatically transformed into lowercase.
While it is possible to apply the style attribute through the setAttribute method, it is advisable to avoid using this approach for styling purposes. Instead, we should utilize the properties of the style object, which will efficiently modify the styles. This can be demonstrated with the code provided below.
Incorrect way
It is advised to avoid utilizing it for modifying the style.
element.setAttribute("style", "background-color: blue;");
Correct way
The appropriate method for altering the style is outlined below.
element.setAttribute.backgroundColor = "blue";
To retrieve the value of an attribute, the getAttribute method can be utilized, while to eliminate a particular attribute from an element, the removeAttribute method should be employed.
When incorporating a Boolean attribute like disabled, the presence of the attribute itself signifies a true value, regardless of its actual value. To explicitly set the Boolean attribute to false, it is necessary to completely delete the attribute by utilizing the removeAttribute method.
Syntax
element.setAttribute(attributeName, attributeValue)
The parameters for this method are mandatory. It is essential to provide both arguments when invoking this method. The values for the parameters are specified as follows.
Parameter Values
attributeName: This refers to the designation of the attribute that we wish to incorporate into an element. It is essential that this field is not left blank; in other words, it is mandatory.
attributeValue: This represents the specific value of the attribute that we intend to assign to an element. Furthermore, it is important to note that this value is not optional.
Let’s explore the usage of the setAttribute method through a few examples.
Example1
In this instance, we are incorporating a href attribute that holds the value of "https://logic-practice.com/"" into the <a> element identified by the id of "link".
<html>
<head>
<title> JavaScript setAttribute() method </title>
<script>
function fun() {
document.getElementById("link").setAttribute("href", "https://logic-practice.com/");
}
</script>
</head>
<body style = "text-align: center;">
<h2> It is an example of adding an attribute using the setAttribute() method. </h2>
<a id = "link"> logic-practice.com </a>
<p> Click the follwing button to see the effect. </p>
<button onclick = "fun()"> Add attribute </button>
</body>
</html>
Output
Upon executing the code provided above, the resulting output will be -
It is evident that prior to selecting the specified button, the link has not been established. Upon clicking the button, the resulting output will be -
Now, we can see that the link is created.
Example2
In this instance, we are modifying the value of an existing attribute by utilizing the setAttribute method. In this scenario, we are transforming a text field into a button by altering the value of the type attribute from text to button.
It is necessary to click on the designated button to observe the resulting effect.
<html>
<head>
<title> JavaScript setAttribute() method </title>
<script>
function fun() {
document.getElementById("change").setAttribute("type", "button");
}
</script>
</head>
<body style = "text-align: center;">
<h2> It is an example to update an attribute's value using the setAttribute() method. </h2>
<input id = "change" type = "text" value = "Example"/>
<p> Click the follwing button to see the effect. </p>
<button onclick = "fun()"> Change </button>
</body>
</html>
Output
Upon executing the code provided above, the resulting output will be -
After clicking the button, the output will be -
Example3
In this instance, we are introducing a Boolean attribute known as disabled to deactivate the designated button. By assigning an empty string as the value of the disabled attribute, it is inherently interpreted as true, resulting in the button being rendered inactive.
<html>
<head>
<title> JavaScript setAttribute() method </title>
<script>
function fun() {
document.getElementById("btn").setAttribute("disabled", "");
}
</script>
</head>
<body style = "text-align: center;">
<h2> Example of the setAttribute() method. </h2>
<p> Click the following button to see the effect </p>
<button onclick = "fun()" id = "btn"> Click me </button>
</body>
</html>
Output
Upon executing the code provided above, the resulting output will be -
After clicking the button, the output will be -