Difference between prop() and attr() Methods in jQuery
Last Updated :
15 May, 2023
In this article, we will learn about the differences between the prop() and the attr() in JQuery. jQuery is the fastest and lightweight JavaScript library that is used to simplify the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. JQuery is widely famous for its motto of “Write less, do more.” It simply means that you can achieve your goal by just writing a few lines of code.
jQuery .prop() Method: This method is used to get the value of a property for the first element in the set of matched elements.
Syntax:
$(selector).prop(property)
Example 1: In this example, we will use jQuery. prop() method.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
var $val = $("div");
$val.prop("font-size", "5px");
$val.append("Property value = "
+ $val.prop("font-size"));
});
});
</script>
<style>
body {
text-align: center;
}
button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksForGeeks
</h1>
<button>Property</button>
<br>
<div></div>
</body>
</html>
Output:
jQuery .attr() method: 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.
Example 2: In this example, we will use .attr() method.
HTML
<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
var title = $("h1").attr("title");
$("#divid").text(title);
});
</script>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<div>
<h1 style="color:green"
title="A computer science portal for Geeks">
GeeksForGeeks
</h1>
<p id="myid">GeeksForGeeks</p>
<div id="divid"></div>
</div>
</body>
</html>
Output:
Explanation: In the above example you can notice that 'A computer science portal for geeks' is a value of GeeksForGeeks.
Difference between .prop() and attr() method:
prop() Method
| attr() Method
|
|---|
| This method returns the current value. | This method returns the default value. |
| This method is mainly used when the user wants to change the value for an HTML tag's attribute. | This method is mainly used to set the default value for an HTML tag's attribute. |
| It changes properties for that HTML tag as per the DOM tree. | It changes attributes for that HTML tag. |
|
Its syntax is:
$(selector).prop(property)
|
Its syntax is:
$(selector).attr(attribute)
|
| It takes three parameters Property , value and a function | It takes three parameters an attribute, value, and a function |
Similar Reads
Difference between text() and html() method in jQuery Text() Method: This method returns the text content of the selected elements. It overwrites the content of all the matches element while setting the content. Syntax: To return text content:$(selector).text()To set text content:$(selector).text(content)To set the text content using a function:$(selec
2 min read
Difference between $(this) and 'this' in jQuery In this article, we will learn the difference between this and $(this) in jQuery. this keyword: In JavaScript, this keyword is used to refer to the object it belongs to. The value that this stores is the current execution context of the JavaScript program.Thus, when used inside a function this value
3 min read
Difference between html() text() and val() methods in jQuery In this article, we are going to discuss the differences between html(), text(), and val() methods and their usage. 1. jQuery html() method: The html() method is used to set or return the inner HTML of a selected element. It works similarly to innerHTML in normal JavaScript to set or get the content
4 min read
Difference Between css(‘width’) and width() methods In jQuery In jQuery, we have two ways to change the width of any HTML element. The jQuery css() method and width() method, below both the methods are described properly with the example. jQuery CSS('width') Method: It is a method present in jQuery which is used to get or set the property on the matched elemen
3 min read
Difference between on() and live() or bind() in jQuery jQuery offers various event handlers like on(), live() and bind(). Though, there are some minor differences which are discussed below. bind() method: This method only attaches events to elements which exist beforehand i.e. state of initialized document before the events are attached. If the selector
3 min read