Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 16 Jan, 2022

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:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </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:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>The jQuery Example</title>
 
    <script type="text/javascript" src=
    </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 are:

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.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!