When is it preferable to use `attr()` instead of `.prop()`? [duplicate]

Question

This question already has answers here:

.prop() vs .attr() (18 answers)

Closed 9 years ago.

(Note: While it may be tempting to say this is a duplicate of .prop() vs .attr(), I do not believe it is. That post does a fantastic job explaining the difference between .prop() and .attr() but does not state definitively when one is preferable over the other, which is what this question aims to do.)

Despite having read a number of questions/answers on StackOverflow regarding the differences between .prop() and .attr(), I still see a lot of confusion on this issue.

I feel it would be useful to have a definitive reference on StackOverflow delineating when one method is preferable to the other, so that we can eliminate the guesswork and attempts at trying to figure out whether something is an attribute or a property.

Thus, I ask, for which attributes/properties is it preferable to use .prop() and for which .attr()?

Answer 1

Applicable before jQuery 1.9

Below is a list of some attributes and properties and which method should normally be used when getting or setting them. This is the preferred usage, but the .attr() method will work in all cases.

+------------------------------------+------------+-----------+
| Attribute/Property                 |  .attr()   |  .prop()  |
+------------------------------------+------------+-----------+
| accesskey                          |    ✓       |           |
| align                              |    ✓       |           |
| async                              |            |    ✓      |
| autofocus                          |            |    ✓      |
| checked                            |            |    ✓      |
| class                              |    ✓       |           |
| contenteditable                    |    ✓       |           |
| disabled                           |            |    ✓      |
| draggable                          |    ✓       |           |
| href                               |    ✓       |           |
| id                                 |    ✓       |           |
| label                              |    ✓       |           |
| location (i.e., window.location)   |            |    ✓      |
| multiple                           |            |    ✓      |
| readOnly                           |            |    ✓      |
| rel                                |    ✓       |           |
| selected                           |            |    ✓      |
| src                                |    ✓       |           |
| tabindex                           |    ✓       |           |
| title                              |    ✓       |           |
| type                               |    ✓       |           |
| width (if needed over .width())    |    ✓       |           |
+------------------------------------+------------+-----------+

Neither .attr() nor .prop() should be used for getting/setting value. Use the .val() method instead (although using .attr(“value”, “somevalue”) will work.

Summary: The .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location). All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method.

Reference

Answer 2

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.

Concerning boolean attributes, consider a DOM element defined by the HTML markup , and assume it is in a JavaScript variable named elem:

elem.checked true (Boolean) Will change with checkbox state $(elem).prop("checked") true (Boolean) Will change with checkbox state

elem.getAttribute("checked") "checked" (String) Initial state of the checkbox; does not change $(elem).attr("checked") (1.6) "checked" (String) Initial state of the checkbox; does not change

$(elem).attr("checked") (1.6.1+) "checked" (String) Will change with checkbox state $(elem).attr("checked") (pre-1.6) true (Boolean) Changed with checkbox state

SOURCE