The attr() function is used to get the value of the attribute of the HTML tag in Jquery. We pass the attribute name in the attr() methods argument to know the value of it.
| Jquery attr() method Get custom attribute value in Jquery Get all attribute name and value |
Here in this below example, I used the H1 tag and it contains align attribute in starting tag. So now, I want to know the value of the align attribute.
For this, first I will select the element through Jquery selector and the use attr() method of Jquery that has a parameter align in double quote. That's all. Now, print the value by any output method of JS. See in the example:-
Jquery attr() method example
<!DOCTYPE html>
<html>
<head>
<title>Get Attribute's Value in Jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1 align="center" id="heading">Welcome To Jaischool.com</h1>
<center><button id="btn">Get H1 tag's Attribute</button></center>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var h_attribute = $("#heading").attr("align");
alert(h_attribute);
});
});
</script>
</body>
</html>Note *** If you select an HTML element in Javascript and then use attr() of Jquery. It won't work.
Get custom attribute value in Jquery
Just pass the custom attribute name in the attr() method's argument (parameter). And print it.
<!DOCTYPE html>
<html>
<head>
<title>Get Attribute's Value in Jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1 align="center" data-type="string" id="heading">Welcome To Jaischool.com</h1>
<center><button id="btn">Get H1 tag's Attribute</button></center>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var h_attribute = $("#heading").attr("data-type");
alert(h_attribute);
});
});
</script>
</body>
</html>Get all attributes and value of an HTML element in Jquery
Test what h_attribute (It has become array because of attributes property) returns by printing it with the console.log(h_attribute).
And in this, a property of Javascript is also used which is attributes. It returns all the attributes in an array, HTML element have. The array has objects at each indexing number.var array = h_attribute[0]; // This is an object
So now to get the attribute name and their value, access two properties from the object that are name (for attribute name) & value (for the attribute value).var attr_name = h_attribute[0].name; and var attr_val = h_attribute[0].value;
To change the indexing number and print data dynamically, I took the help of a loop.
For loop, count the length of the array - var length = h_attribute.length;
<!DOCTYPE html>
<html>
<head>
<title>Get Attribute's Value in Jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1 align="center" data-type="string" id="heading">Welcome To Jaischool.com</h1>
<center><button id="btn">Get H1 tag's Attribute</button></center>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var h_attribute = document.getElementById("heading").attributes;
var length = h_attribute.length
var i;
for(i=0;i<length;i++)
{
var all_attributes_name = h_attribute[i].name;
var all_attributes_value = h_attribute[i].value;
// Create Table and Print all data
var table = document.createElement("TABLE");
table.setAttribute("border","2");
var tr = document.createElement("TR");
var td1 = document.createElement("TD");
td1.style.width="250px";
var td2 = document.createElement("TD");
td2.style.width="250px";
td1.innerHTML=all_attributes_name;
td2.innerHTML=all_attributes_value;
document.body.appendChild(table);
table.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
}
});
});
</script>
</body>
</html>We have printed all attributes and their value by selecting the HTML element by Id. This example may look some difficult but not much. So, try to understand the code.
Attributes name and their value will be printed in the table dynamically because we used Javascript to create the table and its rows & columns.
Similarly, you can get the value of the title attribute, the id attribute's value, etc.
Publish A Comment