HTML METHODS - prop()

The prop() method in JQuery is used to get and set the properties of an HTML element.

prop() as Getter and Setter method

Example :

<html>
    <head>
    	<title> My First Programme </title>
        
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	<p></p>
    	
    	<button class = "addBtn"> Click to add Property </button>
    		  
      	<script>
      
      		$('button.addBtn').click( function() {
				$('p').prop("background-color", "violet");
                $("p").text("The background-color property is added and is : " + $("p").prop("background-color"));
			});
            
      	</script>      
   </body>
</html>

Output :

So, in the above code, we have a <button> element,

<button class = "addBtn"> Click to add Property </button>

On click of the <button> with class name addBtn,

<button class = "addBtn"> Click to add Property </button>

The below JQuery statement is executed,

$('button.addBtn').click( function() {
	$('p').prop("background-color", "violet");
	$("p").text("The background-color property is added and is : " + $("p").prop("background-color"));
});

So, we have used the prop() method to set the background-color property to violet,

$('p').prop("background-color", "violet");

And in the next line, the prop() method is used to get the background-color property of the <p> element.

$("p").text("The background-color property is added and is : " + $("p").prop("background-color"));

And if you see the output, you can see that on click the below text displayed,

The background-color property is added and is : violet

❮❮ PREV NEXT ❯❯