Introduction to SetAttribute JavaScript
In this article, you will learn how to set Attributes from HTML elements in JavaScript. This method setAttribute is used to add specific attributes to an element by giving the attribute a certain value. If the specific attribute is already present/ assigned, the value in it will be updated or overwritten else new attribute is added with specified value and name. Also, it is the DOMString that specifies the name of the attribute whose value has to be set. DOM is an API for HTML and XML documents that define the logical structure of documents. In this topic, we are going to learn about the SetAttribute JavaScript.
The attribute name is converted to lower-case automatically when setAttribute() is used on an HTML element, any value except the string is converted to string automatically.
Syntax:
Element.setAttribute(name, value);Parameters name specifies the name of the value whose value is to be set and value specifies the value which is to be assigned to the attribute.
Since, the specified value gets converted to a string, specifying ‘null’ value sets’s attribute value to string ‘null’ whose return value will be ‘undefined’.
*setAttribute() javascript method does not return any value.
Examples of SetAttribute JavaScript
Let us see few examples on how to use setAttribute()
Example #1
Code:
<!DOCTYPE html>
<html>
<body>
<input value="OK">
<button onclick="sample ()">Click here!</button>
<script>
function sample () {
document.getElementsByTagName("input")[0].setAttribute("type", "button");
}
</script>
</body>
</html>Output:
After clicking on the Click Here button the output will be as shown below.
This example shows how an input field can be modified to an input button. HTML elements define all javascript properties to standard HTML attributes hence while trying to set the attributes to non-standard attributes, the user needs to use javascript setAttribute() function.
Example #2
Code:
<!DOCTYPE html>
<html>
<body>
<a id="sampleAnchor">A Link: Go to Google.com</a>
<p>Click the button to set the href attribute with a value of "www.google.com" of the element id</p>
<button onclick="sample()">Try it</button>
<script>
function sample() {
document.getElementById("sampleAnchor").setAttribute("href", "https://www.google.com");
}
</script>
</body>
</html>Output:
Here, after clicking on Try it, link google.com is the href attribute set to value and now looks like a link.
Example #3
Code:
<!DOCTYPE html>
<html>
<body>
<h1 id="sample">Hi eduCBA!</h1>
<script>
var element = document.getElementById('sample');
element.style.backgroundColor = "yellow";
</script>
</body>
</html>Output:
Example #4
Code:
<!DOCTYPE html>
<html>
<body>
<button id="button" onclick="fun_color()" style="background:green">Click Here!</button>
<script>
function fun_color()
{
var elem = document.getElementById("button");
elem.setAttribute("style", "background:yellow");
}
</script>
</body>
</html>Output:
On clicking on the button, the background color would change to yellow as specified in setAttribute()
Let me explain the above example,
- Id, onclick, and style are the attributes.
- When the button gets clicked, javascript function fun_color is called.
- In the function, we are getting the item using ‘document.getElementById(“button”)’
- Then we are adding to attribute value style and background color as yellow
- Since the attribute is present, the value will change to yellow.
Let us now see what happens if the attribute is not present, considering the above example.
Code:
<!DOCTYPE html>
<html>
<body>
<button id="button" onclick="fun_color()" >Click Here!</button>
<script>
function fun_color()
{
var elem = document.getElementById("button");
elem.setAttribute("style", "background:yellow");
}
</script>
</body>
</html>Output:
Since there is no attribute style “ background”, the button shows the default background color.
On clicking on the button, the background color would change to yellow as specified in setAttribute().
Example #5
Disabling button
Code:
<!DOCTYPE html>
<html>
<body>
<button id="button" onclick="fun_btn()">Hello World</button>
<script>
function fun_btn()
{
var btn = document.querySelector("button");
btn.setAttribute("disabled", "");
}
</script>
</body>
</html>Output:
We can see that the button has been disabled.
- Call to setAttribute() , sets to disabled. An empty string or name of the attribute are recommended values
- If the attribute is present, regardless of its actual value, value is considered to be true else false
- On setting attribute value to ‘disabled’ to “ “ empty string, disabled is set to tue which automatically results in button to be disabled.
We shouldn’t use javascript setAttribute() for styling, to change or add styles, we can access style object.
We shouldn’t set style attributes like the below
element.setAttribute("style", "background-color: yellow;");Instead, we need to use element.style.backgroundColor = “yellow”;
Let us look at an example,
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<h1 id="example">Hi eduCBA</h1>
</body>
</html>In scripts.js
var element = document.getElementById('sample');
element.style.color = "violet";
element.style.backgroundColor = "yellow";Output:
Conclusion
setAttribute() method is used only while dealing with DOM i.e Document Object Model as it uses literal text. We have also noticed that the string name is case insensitive and does not return any value. We also have getAttribute() and removeAttribute() which are used to get the current value of an attribute and to remove an attribute respectively.