Posted By
Bajarangi soft ,
Posted On 29-09-2020
The setAttribute() method adds the specified attribute to an element, and gives it the specified value.
If the specified attribute already exists, only the value is set/changed.
Note: Although it is possible to add the style attribute with a value to an element with this method, it is recommended that you use properties of the Style object instead for inline styling, because this will not overwrite other CSS properties that may be specified in the style attribute
Syntax and Usage
element.setAttribute(attributename, attributevalue)
Parameter Values
attributename String Required. The name of the attribute you want to add attributevalue String Required. The value of the attribute you want to add
Example(1)
<style>
.democlass {
color: red;
}
</style>
<h1>Hello World</h1>
<button class="btn btn-primary" onclick="change_color()">Change_color</button>
<script>
function change_color() {
document.getElementsByTagName("H1")[0].setAttribute("class", "democlass");
}
</script>
In above example when you click on button it will add a class attribute with the value of "democlass" to the h1 element.
Example(2)
<a id="link">A Link: Go to BajarangiSoft.com</a>
<button class="btn btn-primary" onclick="active_link()">Active_link</button>
<script>
function active_link() {
document.getElementById("link").setAttribute("href", "https://blog.bajarangisoft.com/blogs");
}
</script>
In above example when you click on button it will set the href attribute with a value of "www.Bajarangisoft.com" of the a element above.
Example(3)
<input value="OK">
<button class="btn btn-primary" onclick="change()">Change</button>
<script>
function change() {
document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");
}
</script>
In above example when you click on button it will change input field to button.
Complete code for HTML DOM SetAttribute Method In JavaScript
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM SetAttribute Method In JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
h1 {
color: red;
}
.democlass{
color: green;
}
</style>
<body>
<div class="container">
<br>
<br>
<div class="text-center">
<h1>HTML DOM SetAttribute Method In JavaScript</h1>
</div>
<br>
<div class="well">
<h2>Hello World</h2>
<button class="btn btn-primary" onclick="change_color()">Change_color</button>
<br>
<br>
<br>
<a id="link">A Link: Go to BajarangiSoft.com</a>
<br>
<br>
<button class="btn btn-primary" onclick="active_link()">Active_link</button>
<br>
<br>
<input value="OK">
<br>
<br>
<button class="btn btn-primary" onclick="change()">Change</button>
<br>
<br>
</div>
<br>
</div>
</body>
</html>
<script>
function change_color() {
document.getElementsByTagName("H2")[0].setAttribute("class", "democlass");
}
function active_link() {
document.getElementById("link").setAttribute("href", "https://blog.bajarangisoft.com/blogs");
}
function change() {
document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");
}
</script>