.prop() vs .attr()
Update 1 November 2012
My original answer applies specifically to jQuery 1.6. My advice remains the same but jQuery 1.6.1 changed things slightly: in the face of the predicted pile of broken websites, the jQuery team reverted attr()
to something close to (but not exactly the same as) its old behaviour for Boolean attributes. John Resig also blogged about it. I can see the difficulty they were in but still disagree with his recommendation to prefer attr()
.
Original answer
If you've only ever used jQuery and not the DOM directly, this could be a confusing change, although it is definitely an improvement conceptually. Not so good for the bazillions of sites using jQuery that will break as a result of this change though.
I'll summarize the main issues:
- You usually want
prop()
rather thanattr()
. - In the majority of cases,
prop()
does whatattr()
used to do. Replacing calls toattr()
withprop()
in your code will generally work. - Properties are generally simpler to deal with than attributes. An attribute value may only be a string whereas a property can be of any type. For example, the
checked
property is a Boolean, thestyle
property is an object with individual properties for each style, thesize
property is a number. - Where both a property and an attribute with the same name exists, usually updating one will update the other, but this is not the case for certain attributes of inputs, such as
value
andchecked
: for these attributes, the property always represents the current state while the attribute (except in old versions of IE) corresponds to the default value/checkedness of the input (reflected in thedefaultValue
/defaultChecked
property). - This change removes some of the layer of magic jQuery stuck in front of attributes and properties, meaning jQuery developers will have to learn a bit about the difference between properties and attributes. This is a good thing.
If you're a jQuery developer and are confused by this whole business about properties and attributes, you need to take a step back and learn a little about it, since jQuery is no longer trying so hard to shield you from this stuff. For the authoritative but somewhat dry word on the subject, there's the specs: DOM4, HTML DOM, DOM Level 2, DOM Level 3. Mozilla's DOM documentation is valid for most modern browsers and is easier to read than the specs, so you may find their DOM reference helpful. There's a section on element properties.
As an example of how properties are simpler to deal with than attributes, consider a checkbox that is initially checked. Here are two possible pieces of valid HTML to do this:
<input id="cb" type="checkbox" checked>
<input id="cb" type="checkbox" checked="checked">
So, how do you find out if the checkbox is checked with jQuery? Look on Stack Overflow and you'll commonly find the following suggestions:
if ( $("#cb").attr("checked") === true ) {...}
if ( $("#cb").attr("checked") == "checked" ) {...}
if ( $("#cb").is(":checked") ) {...}
This is actually the simplest thing in the world to do with the checked
Boolean property, which has existed and worked flawlessly in every major scriptable browser since 1995:
if (document.getElementById("cb").checked) {...}
The property also makes checking or unchecking the checkbox trivial:
document.getElementById("cb").checked = false
In jQuery 1.6, this unambiguously becomes
$("#cb").prop("checked", false)
The idea of using the checked
attribute for scripting a checkbox is unhelpful and unnecessary. The property is what you need.
- It's not obvious what the correct way to check or uncheck the checkbox is using the
checked
attribute - The attribute value reflects the default rather than the current visible state (except in some older versions of IE, thus making things still harder). The attribute tells you nothing about the whether the checkbox on the page is checked. See http://jsfiddle.net/VktA6/49/.
difference between prop() and attr() in jQuery and when to use attr() and prop()
from docs
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.
example
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.
updated after comment
You can set an attribute for HTML element. You define it while writing the source code, once the browser parse your code, corresponding DOM node will be created which is an object thus having properties.
Simple example can be..
<input type="test" value="test" id="test" />
Here type, value, id are attributes.Once browser renders it, you will get other properties like align, alt, autofocus, baseURI, checked and so on.
link if you want to read more on this
jQuery attr vs prop?
Unfortunately none of your links work :(
Some insight though, attr
is for all attributes. prop
is for properties.
In older jQuery versions (<1.6), we just had attr
. To get to DOM properties such as nodeName
, selectedIndex
, or defaultValue
you had to do something like:
var elem = $("#foo")[0];
if ( elem ) {
index = elem.selectedIndex;
}
That sucked, so prop
was added:
index = $("#foo").prop("selectedIndex");
This was great, but annoyingly this wasn't backward compatible, as:
<input type="checkbox" checked>
has no attribute of checked
, but it does have a property called checked
.
So, in the final build of 1.6, attr
does also do prop
so that things didn't break. Some people wanted this to be a clean break, but I think that the right decision was made as things didn't break all over the place!
Regarding:
Prop: The value in it's current state after any modifications via JavaScript
Attr: The value as it was defined in the html on page load.
This isn't always true, as many times the attribute is actually changed, but for properties such as checked, there isn't an attribute to change, so you need to use prop.
References:
http://blog.jquery.com/2011/05/03/jquery-16-released/
http://ejohn.org/blog/jquery-16-and-attr
jQuery: prop vs attr... clarification
I cannot find any complete list online. Everyone who gives any kind of a list just copies the partial one given in the jQuery 1.6 blog post. Regarding #3, Starx sortof addressed this in his comment to an answer here. http://timmywillison.com/ goes into better detail with a decent discussion. MDN and the W3C specs also mentions that there are various interfaces from attributes where they can be set as if they were properties ( https://developer.mozilla.org/en/DOM/element ), though MDN doesn't actually list which ones those are. MDN does mention that using the property interfaces as setters is more brittle than using getAttribute:
"While these interfaces are generally shared by most HTML and XML elements, there are more specialized interfaces for particular objects listed in the DOM HTML Specification. Note, however, that these HTML interfaces are "only for [HTML 4.01] and [XHTML 1.0] documents and are not guaranteed to work with any future version of XHTML." The HTML 5 draft does state it aims for backwards compatibility with these HTML interfaces but says of them that "some features that were formerly deprecated, poorly supported, rarely used or considered unnecessary have been removed." One can avoid the potential conflict by moving entirely to DOM XML attribute methods such as getAttribute()."
However, it seems safe to assume for now that any HTML5 doctype page rendered in Firefox and Chrome is already in an environment where 'deprecated, poorly supported', etc interfaces have already been removed.
Thus I've tested every attribute, as well as the non-attribute properties mentioned in the jQuery blogs, against every every HTML element type, using boolean, string, and int values.
Using 1.7.2 and 1.8pre, whether you call .prop() or attr(), jQuery will internally always actually use .prop for:
async, autofocus, autoplay, checked, controls, defer, disabled, hidden, loop,
multiple, open, readonly, required, scoped, selected
For HTML elements (not considering window, document, etc here), jQuery will not set any of the following attributes unless you use .attr():
accept-charset, accesskey, bgcolor, buffered, codebase, contextmenu, datetime,
default, dirname, dropzone, form, http-equiv, icon, ismap, itemprop, kind,
language, list, location, manifest, nodeName, nodeType, novalidate, pubdate,
radiogroup, seamless, selectedIndex, sizes, srclang, style, tagName
And finally, jQuery will set the following list of attributes with either .prop() or .attr(). In the first list above, jQuery always uses .prop(), regardless of whether you use .attr() or .prop(). For the attributes in this list, jQuery uses whatever you use. If you use .prop(), jQuery uses .prop(), and vica versa. In either case, the result is the same. So ignoring any potential semantic considerations, just with regards to prop() being ~2.5 times faster than .attr(), the jQuery 1.6.1 blog post suggests that .attr() be used, but .prop() can be used instead, with significant increase in performance:
accept, action, align, alt, autocomplete, border, challenge, charset, cite,
class, code, color, cols, colspan, contenteditable, coords, data, defaultValue,
dir, draggable, enctype, for, headers, height, hidden, high, href, hreflang,
id, keytype, label, lang, low, max, maxlength, media, method, min, name,
optimum, pattern, ping, placeholder, poster, preload, readonly, rel, required,
reversed, rows, rowspan, sandbox, scope, shape, size, span, spellcheck, src,
srcdoc, start, step, summary, tabindex, target, title, type, usemap, value,
width, wrap
When is it preferable to use `attr()` instead of `.prop()`?
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
Should I set title with .prop or .attr
I guess you're familiar with the differences between prop
and attr
.
As the title
attribute is reflected by the title
property, there is actually no difference.
Which method should i use out of this(.attr() vs .prop()) for performance and usage?
$.attr() vs $.prop()
Here a clear answer explained breif
I cannot find any complete list online. Everyone who gives any kind of a list just copies the partial one given in the jQuery 1.6 blog post. Regarding #3, Starx sortof addressed this in his comment to an answer here. http://timmywillison.com/ goes into better detail with a decent discussion. MDN and the W3C specs also mentions that there are various interfaces from attributes where they can be set as if they were properties ( https://developer.mozilla.org/en/DOM/element ), though MDN doesn't actually list which ones those are. MDN does mention that using the property interfaces as setters is more brittle than using getAttribute:
"While these interfaces are generally shared by most HTML and XML elements, there are more specialized interfaces for particular objects listed in the DOM HTML Specification. Note, however, that these HTML interfaces are "only for [HTML 4.01] and [XHTML 1.0] documents and are not guaranteed to work with any future version of XHTML." The HTML 5 draft does state it aims for backwards compatibility with these HTML interfaces but says of them that "some features that were formerly deprecated, poorly supported, rarely used or considered unnecessary have been removed." One can avoid the potential conflict by moving entirely to DOM XML attribute methods such as getAttribute()."
However, it seems safe to assume for now that any HTML5 doctype page rendered in Firefox and Chrome is already in an environment where 'deprecated, poorly supported', etc interfaces have already been removed.
Thus I've tested every attribute, as well as the non-attribute properties mentioned in the jQuery blogs, against every every HTML element type, using boolean, string, and int values.
Using 1.7.2 and 1.8pre, whether you call .prop() or attr(), jQuery will internally always actually use .prop for:
async, autofocus, autoplay, checked, controls, defer, disabled, hidden, loop,
multiple, open, readonly, required, scoped, selected
For HTML elements (not considering window, document, etc here), jQuery will not set any of the following attributes unless you use .attr():
accept-charset, accesskey, bgcolor, buffered, codebase, contextmenu, datetime,
default, dirname, dropzone, form, http-equiv, icon, ismap, itemprop, kind,
language, list, location, manifest, nodeName, nodeType, novalidate, pubdate,
radiogroup, seamless, selectedIndex, sizes, srclang, style, tagName
And finally, jQuery will set the following list of attributes with either .prop() or .attr(). In the first list above, jQuery always uses .prop(), regardless of whether you use .attr() or .prop(). For the attributes in this list, jQuery uses whatever you use. If you use .prop(), jQuery uses .prop(), and vica versa. In either case, the result is the same. So ignoring any potential semantic considerations, just with regards to prop() being ~2.5 times faster than .attr(), the jQuery 1.6.1 blog post suggests that .attr() be used, but .prop() can be used instead, with significant increase in performance:
accept, action, align, alt, autocomplete, border, challenge, charset, cite,
class, code, color, cols, colspan, contenteditable, coords, data, defaultValue,
dir, draggable, enctype, for, headers, height, hidden, high, href, hreflang,
id, keytype, label, lang, low, max, maxlength, media, method, min, name,
optimum, pattern, ping, placeholder, poster, preload, readonly, rel, required,
reversed, rows, rowspan, sandbox, scope, shape, size, span, spellcheck, src,
srcdoc, start, step, summary, tabindex, target, title, type, usemap, value,
width, wrap
More clear about this answer look at Click Here
Hope this helps....
Behaviour for 'rel' attribute: prop() vs attr()
Before jQuery 1.6 attr()
was used for both HTML attributes and Object properties.
After jQuery 1.6 attr()
is used for HTML attributes only, like href
or rel
, class
or any other.
prop()
is now used for Object properties like
var Obj = {
propOne: 'somevalue'
}
or
selectedIndex, tagName, nodeName, nodeType, ...
From the docs:
... the .prop()
method provides a way to explicitly retrieve property values, while
.attr() retrieves attributes.
The key phrase for using prop()
is:
Properties do not have corresponding (HTML) attributes and are only properties.
Examples from the docs:
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
jQuery .prop() function not working (.prop() vs .attr())
.prop
only sets properties, not attributes. If an attribute is created, the browser did it not jQuery.
http://api.jquery.com/prop/
Related Topics
How to Scroll to Top of Page With JavaScript/Jquery
Pure JavaScript Method to Wrap Content in a Div
JavaScript Dom: Find Element Index in Container
Programmatically Trigger "Select File" Dialog Box
Getelementbyid() Returns Null Even Though the Element Exists
How to Download a File Without Using ≪A≫ Element With Download Attribute or a Server
How to Call a Rest Web Service API from JavaScript
How to Show Alternate Image If Source Image Is Not Found? (Onerror Working in Ie But Not in Mozilla)
Show Hide Divs on Click in HTML and CSS Without Jquery
Full Text Search in HTML Ignoring Tags/&
How to Force a Link to Open in a Specific Browser
Input Value Is a String Instead of a Number
What Does This Symbol Mean in JavaScript
Changing CSS Pseudo-Element Styles Via JavaScript
Xmlhttprequest Cannot Load Xxx No 'Access-Control-Allow-Origin' Header
Why Does Jquery or a Dom Method Such as Getelementbyid Not Find the Element