Chrisk.la

How to Tell the Difference between jQuery 1.6 .attr() and .prop()

by Chris 8. June 2011 14:19

In the newest version of jQuery, 1.6, a new function .prop() was introduced to distinguish the difference between a DOM property and a HTML attribute.

.prop() returns the DOM property, where .attr() returns the HTML attribute.  Here's what the differences are.

A HTML attribute, is what is in the HTML.  For the following snippet, 
<input id="foo" type="text" value="abc">
"abc" is the HTML attribute.
Gary Green posts the differences well from Stack Overflow:
<input blah="hello">

$('input').attr('blah'): returns 'hello' as expected. No suprises here.

$('input').prop('blah'): returns undefined -- because it's trying to do [HTMLInputElement].blah -- and no such property on that DOM object exists. It only exists in the scope as an attribute of that element i.e. [HTMLInputElement].getAttribute('blah')

Its also important to note that as of version 1.6.1, .attr() works the same as it always did.

Add comment




  Country flag
biuquote
  • Comment
  • Preview
Loading


Page List

Month List