Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Difference between prop() and attr() methods in jQuery
The prop() and attr() methods in jQuery are both used to change the attributes and properties of HTML elements, but they accomplish slightly different tasks. Although they are sometimes used interchangeably, knowing how they vary might help you decide which approach is best for your particular use case. Let’s dive into the article to learn more about the differences between the prop() and attr() methods in jQuery.
jQuery prop() method
Prop() is a jQuery method that is used to set or return properties and values for the selected elements. When this method is used to get a property value, it returns the value of the first matched element, and when it is used to set a property value, it sets one or more properties for the chosen elements.
Syntax
Following is the syntax of prop() method
$(selector).prop(property)
Example
Let’s look at the following example, where we are going to implement the jQuery prop() method.
<!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", "1.6em");
$val.append("Property value = " + $val.prop("font-size"));
});
});
</script>
</head>
<body>
<h2>Adding Property</h2>
<button>Click me.!</button>
<br>
<br>
<div></div>
</body>
</html>
When we execute the above script, it will generate an output consisting of the text along with a click button on the webpage. When the user clicks the button, the event gets triggered and displays the value.
jQuery attr() method
The attr() method is used to set or returns the attributes and values of the chosen elements. The value of the FIRST matched element is returned when this method is used to return the attribute value. When this method is used to set attribute values, one or more attribute/value pairs are set for the matched elements.
Syntax
Following is the syntax of attr() method
$(selector).attr(attribute)
Example
Consider the following example, where we are going to implement the jQuery attr() method.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body style="background-color:#E8DAEF">
<center>
<img src="https://www.tutorialspoint.com/cg/images/logo.png" alt="LOGO" width="" height="200" />
<br>
<br>
<button>CLICK</button>
</center>
<script>
$(document).ready(function() {
$("button").click(function() {
$("img").attr("width", "350");
});
});
</script>
</body>
</html>
On executing the above script, the output will pop up, displaying the image in larger size along with a click button on the webpage. When the user clicks the button, the event gets triggered and sets the image width to 350.
Difference between prop() and attr() methods
Let’s look into some of the difference between prop() and attr() methods in jQuery.
prop() method |
attr() method |
|---|---|
The current value is returned by this method. |
The default value is returned by this method. |
When a user wishes to modify the value of an HTML tag's attribute, they typically utilize this method. |
The primary task of this method is to specify the attribute's default value for an HTML tag. |
According to the DOM tree, it modifies the properties for that HTML tag. |
It is used to change the attribute of the HTML tag. |
Syntax − $(selector).prop(property) |
Syntax − $(selector).attr(attribute) |
It took three parameters they are Value, property, and function. |
It took three parameters they are value , function and attribute. |
10 Views
