Home »
jQuery »
jQuery Examples
Difference between prop() and attr() in jQuery
Here, we'll discuss about the prop() and attr() methods of jQuery and what are the differences between them?
Submitted by Pratishtha Saxena, on May 28, 2022
jQuery prop() Method
"Prop" is an acronym for properties. It sets and returns the properties of the given HTML element. This method returns the current value.
The prop() changes properties for that HTML tag as per the DOM tree. It takes three parameters Property, value, and a function.
Syntax:
$(selector).prop(property)
Note: Always make sure to include the jQuery CDN link in the script tag whenever working with jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Example 1:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script>
<title>Title</title>
</head>
<body>
<div>
<p></p>
<br><br>
<!-- click button to execute method -->
<button> Click Button </button>
</div>
</body>
</html>
jQuery Function:
<script>
$(document).ready(function(){
$("button").click(function(){
var $x = $("p");
$x.prop("color", "red");
$x.append(" Color property is set and its value: " + $x.prop("color"));
});
});
</script>
Output:
jQuery attr() Method
It is an acronym for attributes. This method is used to either fetch the value of an attribute from the first element in the matched set or set attribute values onto all matched elements. So, in short it also sets and returns the attribute of the specified element. But it returns the default value.
The attr() changes attributes for that HTML tag. It also takes three parameters an attribute, value, and a function.
Syntax:
$(selector).attr(attribute)
Example 2:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<center>
<h2> jQuery attr() Method</h2>
<img src="https://png.pngtree.com/png-clipart/20190925/original/pngtree-red-blue-vs-metal-font-png-image_4983552.jpg"
alt=""
width="120"
height="300"
class="alignnone size-medium wp-image-915678" />
<br>
<br>
<button>Click</button>
</center>
</body>
</html>
jQuery Function:
<script>
$(document).ready(function() {
$("button").click(function() {
$("img").attr("width", "300");
});
});
</script>
Output:
Hence, for jQuery 1.6+, prop() will be mostly used because it is simple and wider than attr().