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:

Example 1: .prop() vs .attr()

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:

Example 2: .prop() vs .attr()

Hence, for jQuery 1.6+, prop() will be mostly used because it is simple and wider than attr().


ADVERTISEMENT
ADVERTISEMENT




Comments and Discussions!




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.