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

Difference between text() and html() method in jQuery

krishnanand3

Improve

Article Tags :

Difference between prop() and attr() Methods in jQuery

Similar Reads

Thank You!

What kind of Experience do you want to share?