The getAttribute function is utilized to retrieve the value of a specified attribute from a particular element. When the attribute is present, it provides a string that represents the value associated with that attribute. Conversely, if the specified attribute is absent, it will return either an empty string or a null value.
It differs from the getAttributeNode function. The getAttributeNode function provides the attribute in the form of an Attr object.
Syntax
element.getAttribute(attributename)
Parameter Values
attributename: This parameter is mandatory. It specifies the name of the attribute from which we wish to retrieve the value.
Let us understand it by using some examples.
Example1
In this illustration, there exist two div elements identified as div1 and div2, both equipped with a style attribute. We retrieve the value of the style attribute by employing the getAttribute method.
We need to select the provided button in order to retrieve the value of the style attribute from the specified div elements.
<!DOCTYPE html>
<html>
<head>
<title>
The getAttribute Method
</title>
</head>
<body>
<h1>
Welcome to the logic-practice.com
</h1>
<h2>
Example of the getAttribute() Method
</h2>
<div id = "div1" style = "background-color: yellow; font-size: 25px; color: red; border: 2px solid red;">
This is first div element.
</div>
<br>
<div id = "div2" style = "background-color: lightblue; font-size: 25px; color: blue; border: 2px solid blue;">
This is second div element.
</div>
<br>
<button onclick = "fun()">
Click me!
</button>
<p id = "p"></p>
<p id = "p1"></p>
<script>
function fun() {
var val = document.getElementById("div1").getAttribute("style");
document.getElementById("p").innerHTML = val;
var val1 = document.getElementById("div2").getAttribute("style");
document.getElementById("p1").innerHTML = val1;
}
</script>
</body>
</html>
Output
After the execution, the output is -
After clicking the button, the output will be -
Example2
Additionally, we can retrieve the value of the onclick attribute associated with the button element. In the following example, we will be extracting both the value of the onclick attribute and that of the href attribute. There exists an anchor element that contains the href attribute; we will obtain the value of this attribute by utilizing the getAttribute method.
<!DOCTYPE html>
<html>
<head>
<title>
The getAttribute Method
</title>
</head>
<body>
<h1>
Welcome to the logic-practice.com
</h1>
<h2>
Example of the getAttribute() Method
</h2>
<div id = "div1" style = "background-color: yellow; font-size: 25px; color: red; border: 2px solid red;">
This is the div element.
</div>
<br>
<a href = "https://logic-practice.com/" id = "link"> logic-practice.com </a>
<br><br>
<button onclick = "fun()" id = "btn">
Click me!
</button>
<p id = "p"></p>
<p id = "p1"></p>
<script>
function fun() {
var val = document.getElementById("btn").getAttribute("onclick");
document.getElementById("p").innerHTML = val;
var val1 = document.getElementById("link").getAttribute("href");
document.getElementById("p1").innerHTML = val1;
}
</script>
</body>
</html>
Output
After the execution, the output will be -
After clicking the button, the output is -