jQuery Introduction | Setting CSS Styles and Properties | Setting Properties .attr() .prop()

Setting Properties

The following methods let you get or set the value of a specific property.

.attr() and .removeAttr() Methods

The .attr() method returns the specified attribute value of selected elements, or sets the specified attribute of selected elements to the passed value.

The .removeAttr() method removes an attribute value from selected elements.

The following example uses .attr() to set and return an attribute value, and uses .removeAttr() to remove it.

$("#btnSetter").on("click", function() {
  $("span").attr("title", "Clicked " + (++count) + " times.");  // Set attribute value
});
$("#btnGetter").on("click", function() {
  $("p").text($("span").attr("title"));  // Return attribute value
});
$("#btnRemove").on("click", function() {
  $("span").removeAttr("title"); // Remove attribute
});

Run code

.prop() and .removeProp() Methods

The .prop() method was newly defined in jQuery 1.6. This method returns the specified property value of the first element in the selected element set, or sets the specified property of selected elements to the passed value.

The .removeProp() method removes a property.

$("#btnSetter").on("click", function() {
  $('input[type="checkbox"]').prop({checked: true}); // Set property
});
$("#btnGetter").on("click", function() {
  $("p").text($('input[type="checkbox"]').prop("checked")); // Return property
});
$("#btnRemove").on("click", function() {
  $('input[type="checkbox"]').removeProp("checked"); // Remove property
});

Run code

Difference Between Attribute and Property

To understand the difference between .attr() and .prop(), you must first understand the difference between an attribute and a property.

Attribute

An attribute is a name-value pair that contains additional information about an HTML element.

The <input> element below has an attribute named checked, and its attribute value is "checked".

<input type="checkbox" name="chk" checked="checked">

Property

A property refers to the value inside the HTML DOM tree when such an attribute is represented as an object.

In the example below, if the checkbox is checked, the checked property value is true.

<input type="checkbox" name="chk" checked="checked">

In short, attributes exist in the HTML document and their values do not change, while properties exist in the HTML DOM tree and their values can change.

For example, if a user checks an <input> element in an HTML document or changes its value with JavaScript, the attribute value does not change, but the property value changes.

Difference Between .attr() and .prop()

Before jQuery 1.6, when using .attr(), you had to write code that also considered property values for some attributes that caused inaccurate behavior. Starting with jQuery 1.6, .attr() handles only attributes, and the newly provided .prop() method handles property values, resolving this problem.

The following example shows how attribute and property values change whenever a checkbox changes.

$('input[type="checkbox"]').change(function() {
  var html = "checked attribute value: " + $(this).attr("checked") +"<br>";
  html += "checked property value: " + $(this).prop("checked");
  $("p").html(html);
}).change();

Run code

References

• http://api.jquery.com/attr/
• http://api.jquery.com/removeattr/
• http://api.jquery.com/prop/
• http://api.jquery.com/removeprop/