attr() method | How To Get Attribute’s Value in Jquery

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.

Table of contents
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.

Also, Read
* Generate a random number in PHP
* Disable form’s submit behavior in JS
* Remove class in Jquery
* Add class in Jquery
* Change the class value in Javascript

Leave a Comment