jQuery | prop() with Examples

The prop() is an inbuilt method in jQuery which is used to set or return properties and values for the selected elements. When this method is used to return the property value, it returns the value of the FIRST matched element and when this method is used to set property values, it sets one or more property for the selected elements.
Syntax :

$(selector).prop(para1, para2)

Parameters: It accepts two parameters which are specified below-

  • para1: It specifies the property.
  • para2: It specifies the value of the property in case of set.
  • Return Value: It returns the property and value set for the property for the selected element.

    jQuery code to show the working of prop() method:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
       <head>
          <script
          </script>
          <!-- jQuery code to show thre working of this method -->
          <script>
             $(document).ready(function(){
                 $("button").click(function(){
                 var $x = $("p");
                 $x.prop("color", "green");
                 $x.append(" Property is color and its value: " + $x.prop("color"));
                       
                 });
             });
          </script>
          <style>
             div{
             width: 250px;
             padding: 10px;
             height: 100px;
             border: 2px solid green;
             }
          </style>
       </head>
       <body>
          <div>
             <p></p>
             <br><br>
             <!-- click on button this method -->
             <button>Click Here!</button>
          </div>
       </body>
    </html>

    chevron_right

    
    

    Output:
    Before clicking on the “Click Here” button-

    After clicking on the “Click Here” button-



    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :

    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.