2012-11-06 08:22:03 8 Comments
Now this isn't just another What's the difference question, I have done some tests(http://jsfiddle.net/ZC3Lf/) modifying the prop
and attr
of <form action="/test/"></form>
with the output being:
1) prop Modification test
Prop:http://fiddle.jshell.net/test/1
Attr:http://fiddle.jshell.net/test/1
2) Attr Modification test
Prop:http://fiddle.jshell.net/test/1
Attr:/test/1
3) Attr then Prop Modification test
Prop:http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11
4) Prop then Attr Modification test
Prop:http://fiddle.jshell.net/test/11
Attr:http://fiddle.jshell.net/test/11
Now I am confused about a couple of things, as far as my knowledge goes:
Prop: The value in its current state after any modifications via JavaScript
Attr: The value as it was defined in the html on page load.
Now if this is correct,
- Why does modifying the
prop
seem to make theaction
fully qualified, and conversely why does modifying the attribute not? - Why does modifying the
prop
in1)
modify the attribute, that one makes no sense to me? - Why does modifying the
attr
in2)
modify the property, are they meant to be linked that way?
Test Code
HTML
JavaScript
var element = $('form');
var property = 'action';
/*You should not need to modify below this line */
var body = $('body');
var original = element.attr(property);
body.append('<h1>Prop Modification test</h1>');
element.prop(property, element.prop(property) + 1);
body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');
//reset
element.prop(property, original);
element.attr(property, original);
body.append('<h1>Attr Modification test</h1>');
element.attr(property, element.attr(property) + 1);
body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');
//reset
element.prop(property, original);
element.attr(property, original);
body.append('<h1>Attr then Prop Modification test</h1>');
element.attr(property, element.attr(property) + 1);
element.prop(property, element.prop(property) + 1);
body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');
//reset
element.prop(property, original);
element.attr(property, original);
body.append('<h1>Prop then Attr Modification test</h1>');
element.prop(property, element.prop(property) + 1);
element.attr(property, element.attr(property) + 1);
body.append('Prop: '+element.prop(property)+'<br />');
body.append('Attr: '+element.attr(property)+'<hr />');
Related Questions
Sponsored Content
56 Answered Questions
[SOLVED] How do I check if an element is hidden in jQuery?
- 2008-10-07 13:03:18
- Philip Morton
- 2553311 View
- 7499 Score
- 56 Answer
- Tags: javascript jquery dom visibility
65 Answered Questions
[SOLVED] How to check whether a checkbox is checked in jQuery?
- 2009-05-23 15:16:39
- Prasad
- 4027920 View
- 4404 Score
- 65 Answer
- Tags: javascript jquery html checkbox
17 Answered Questions
[SOLVED] .prop() vs .attr()
- 2011-05-03 19:33:28
- Naftali aka Neal
- 575626 View
- 2253 Score
- 17 Answer
- Tags: javascript jquery dom attr prop
27 Answered Questions
[SOLVED] How can I refresh a page with jQuery?
- 2011-03-23 11:55:31
- luca
- 2399247 View
- 2370 Score
- 27 Answer
- Tags: javascript jquery refresh reload
42 Answered Questions
[SOLVED] Is there an "exists" function for jQuery?
- 2008-08-27 19:49:41
- Jake McGraw
- 729939 View
- 2674 Score
- 42 Answer
- Tags: javascript jquery
35 Answered Questions
[SOLVED] Add table row in jQuery
- 2008-10-04 21:33:10
- Darryl Hein
- 1607475 View
- 2340 Score
- 35 Answer
- Tags: javascript jquery html-table
40 Answered Questions
[SOLVED] Setting "checked" for a checkbox with jQuery?
- 2009-01-08 22:20:24
- tpower
- 3168908 View
- 3992 Score
- 40 Answer
- Tags: javascript jquery checkbox selected checked
29 Answered Questions
[SOLVED] jQuery scroll to element
- 2011-07-13 09:49:44
- DiegoP.
- 2368330 View
- 2203 Score
- 29 Answer
- Tags: javascript jquery
17 Answered Questions
[SOLVED] Disable/enable an input with jQuery?
- 2009-09-12 05:21:54
- omg
- 2114691 View
- 2217 Score
- 17 Answer
- Tags: javascript jquery html-input
15 Answered Questions
[SOLVED] "Thinking in AngularJS" if I have a jQuery background?
- 2013-02-21 04:09:56
- Mark Rajcok
- 814323 View
- 4518 Score
- 15 Answer
- Tags: javascript jquery angularjs
4 comments
@SmasherHell 2013-04-11 12:36:54
There is a clear case to see differences between .prop and .attr
consider the HTML below :
and the JS below using jQuery :
creates the following output:
@Rich Bradshaw 2012-11-06 08:31:56
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 asnodeName
,selectedIndex
, ordefaultValue
you had to do something like:That sucked, so
prop
was added:This was great, but annoyingly this wasn't backward compatible, as:
has no attribute of
checked
, but it does have a property calledchecked
.So, in the final build of 1.6,
attr
does also doprop
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:
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
@Hailwood 2012-11-06 08:54:41
Link to test was on "done some tests" above I'll make it more visible, but here it is anyway: jsfiddle.net/ZC3Lf
@hiway 2013-06-28 12:18:35
I find a question, if the attribute is customized, not DOM properties, prop() returns
undefined
, and attr() works well.@Martin Abraham 2014-07-27 12:35:45
since jquery 1.6.1+ attr() returns/changes property like before 1.6. thus your tests do not make much sense.
be aware of minor changes in return values.
e.g.
attr(‘checked’): before 1.6 true/false is returend, since 1.6.1. “checked”/undefined is returned.
attr(‘selected’): before 1.6 true/false is returned, since 1.6.1 “selected”/undefined is returned
a detailed overview to this topic in german can be found here:
http://mabraham.de/jquery-prop-attr-val-richtig-verwenden/
@Haocheng 2012-11-06 08:33:21
I have tried this
and it outputs as below
this may indicates that the
action
is normalized only when it is read withprop
.@Hailwood 2012-11-06 08:56:43
I don't think so, as otherwise the output in
2)
would be normalized!@Haocheng 2012-11-06 08:59:00
@Hailwood It won't, because you got
/test/
when access toattr
, and then set/test/1
toattr
, which is attr of the element. There aren't any procedure that triggers normalization.@Hailwood 2012-11-06 09:01:50
I am confused as to what you mean, test
2)
above iselement.attr(property, element.attr(property) + 1); body.append('Prop: '+element.prop(property)+'<br />'); body.append('Attr: '+element.attr(property)+'<hr />');
If it was normalized when read, would the final line there not output the normalized version?@Hailwood 2012-11-06 09:02:42
Variables:
property = 'action'; body = $('body'); element = $('form');
@Haocheng 2012-11-06 09:08:48
Normalization will only be trigger when prop is accessed, and the access of attr will not.
@Haocheng 2012-11-06 09:14:40
I have edited my answer, corrected this point. thx.