jQuery attr vs prop?
Solution 1
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
Solution 2
There is a clear case to see differences between .prop and .attr
consider the HTML below :
<form name="form" action="#">
<input type="text" name="action" value="myvalue" />
<input type="submit" />
</form>
<pre id="return">
</pre>
and the JS below using jQuery :
$(document).ready(function(){
$("#return").append("$('form').prop('action') : " + $('form').prop('action') + '\r\n');
$("#return").append("$('form').attr('action') : " + $('form').attr('action') + '\r\n');
$("#return").append("document.form.action : " + document.form.action);
});
creates the following output:
$('form').prop('action') : [object HTMLInputElement]
$('form').attr('action') : #
document.form.action : [object HTMLInputElement]
Solution 3
I have tried this
console.log(element.prop(property));
console.log(element.attr(property));
and it outputs as below
http://fiddle.jshell.net/test/
/test/
this may indicates that the action
is normalized only when it is read with prop
.
Solution 4
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:
Related videos on Youtube
Hailwood
I could tell you all about me... but I'd prefer to let my work do the talking for me!
Updated on February 15, 2020Comments
-
Hailwood over 4 years
Now this isn't just another What's the difference question, I have done some tests(http://jsfiddle.net/ZC3Lf/) modifying the
prop
andattr
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 />');
-
goodeye about 11 yearsPossible duplicate of stackoverflow.com/questions/5874652/prop-vs-attr
- Why does modifying the
-
Hailwood over 11 yearsLink to test was on "done some tests" above I'll make it more visible, but here it is anyway: jsfiddle.net/ZC3Lf
-
Hailwood over 11 yearsI don't think so, as otherwise the output in
2)
would be normalized! -
Haocheng over 11 years@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 over 11 yearsI 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 over 11 yearsVariables:
property = 'action'; body = $('body'); element = $('form');
-
Haocheng over 11 yearsNormalization will only be trigger when prop is accessed, and the access of attr will not.
-
hiway almost 11 yearsI find a question, if the attribute is customized, not DOM properties, prop() returns
undefined
, and attr() works well.