1

Please take time to read the question in full before assuming that it's a duplicate of .prop() vs .attr()

I've read .prop() vs .attr() and a handful of the duplicates and related non-duplicates. My question is: when is it appropriate to pass values to .attr() when dealing with HTML and the DOM?

Of course the simple answer is "why, whenever you wish to set or modify the value of an attribute - otherwise (and usually) use .prop()."

But what I really want to know is when should you wish to. In the jQuery docs for the method, I see examples of setting things like id, src alt, and title on img elements. But the docs don't seem to give any indication of why you may want to do so, over using .prop() to set these particular attributes.

What I'm after is a guiding principle of when to use .attr() to set things rather than .prop().

Related note: the particular case I'm working on is what's the proper way to change the action on a form, but really I want the perspective and understanding behind the decision.

edit To clarify, I am not looking for:

  • the differences between properties and attributes
  • the differences between .attr() and .prop()
  • the differences between using .attr() and .prop() to get values for either attributes or properties

Otherwise, we could just mark this as a duplicate and call it a day :) No offense intended whatsoever to what's been offered so far - just wanted to make it clear that I'm looking for info on what determines when it's right to use .attr() to set the attribute value, which info I did not find on the venerable .prop() vs .attr() (though if it's there and I missed it, let's definitely mark this as a duplicate!) Thanks!

Community
  • 1
  • 1
jinglesthula
  • 4,446
  • 4
  • 45
  • 79
  • 3
    Everything can be found here : http://stackoverflow.com/questions/5874652/prop-vs-attr – daan.desmedt Sep 19 '14 at 14:25
  • 1
    @daan.desmedt that's the link in the question, but yeah I agree it does pretty much explain everything – Pete Sep 19 '14 at 14:27
  • @Pete Even so, it *does* appropriately answer the OP's question. Edit: Your edit covered that :) – CodingIntrigue Sep 19 '14 at 14:28
  • May explain some more things: http://ejohn.org/blog/jquery-16-and-attr/ – SSA Sep 19 '14 at 14:42
  • @daan.desmedt I've read the question you reference as well as lots of answers and comments there. The reason I asked this question is because it's the one thing I was looking for that I couldn't find there :(. If this is answered there, could you provide a link to the answer (and/or comment) that covers this aspect of the larger topic? I read til my eyes went blurry :) – jinglesthula Sep 19 '14 at 15:03
  • @SSA I re-read the post again just now (it's been a while since I read it) and I'm not seeing much there that addresses this specific aspect of attr/prop. I didn't re-read any of the comments, though. Do you know of one there that provides insight? – jinglesthula Sep 19 '14 at 15:07
  • You should really only ask for your particular case. Those general questions are covered well in the other question. – Bergi Sep 19 '14 at 15:13
  • @Bergi I really want to understand the principle involved so I can make the right decision in my particular case and in other cases in the future. I do not see where in the other question this specific aspect of the topic is covered. If you could link to an answer/comment that would be awesome. I just didn't spot it (there's a lot of text and ground covered there :) – jinglesthula Sep 19 '14 at 15:24
  • I think TJCrowder's and user1385191's answers are explaining the difference between attributes and properties quite well. What this means for setting is quite similar to what it means for getting. – Bergi Sep 19 '14 at 15:34
  • I have to apologize for how I've worded the question. Please read it carefully - it is specifically not looking for the difference between properties and attributes. – jinglesthula Sep 19 '14 at 15:37
  • Found this: http://jquery.com/upgrade-guide/1.9/#attr-versus-prop- The first two sentences of that section come maddeningly close to answering the question. But the whole rest of the section deals with selectors :( http://jquery.com/upgrade-guide/1.9/#quot-input-quot-attr-quot-type-quot-newvalue-in-oldie also is in the neighborhood but doesn't provide what the question wants. – jinglesthula Sep 19 '14 at 15:39
  • I should mention that the link for the 1.9 upgrade guide is maddening partly because it says using .attr() to set properties is deprecated, but http://api.jquery.com/attr/#attr2 has no deprecation notice on passing values to set to .attr() in general. Perhaps a related question could be what the use of changing an attribute and leaving the related property unaffected? Put another way, if .attr('foo', 'bar') has the 'changing underlying property' aspect of it deprecated, will that aspect be removed at some point, and if so then what is .attr('foo', 'bar') for at that point? – jinglesthula Sep 19 '14 at 15:57

2 Answers2

1

From http://jq4you.blogspot.in/2013/04/jquery-attr-vs-prop-difference.html:

Jquery attr() vs prop() 

jQuery.attr()

Get the value of an attribute for the first element in the set of matched elements.

whereas, 

jQuery.prop()

Get the value of a property for the first element in the set of matched elements.

Before jQuery 1.6 , the attr() method sometimes took property values into account when retrieving some attributes, which caused in inconsistent behavior. And thus, the prop() method was introduced. As of jQuery 1.6. , the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

What actually is Attributes?

Attributes carry additional information about an HTML element and come in name=”value” pairs. You can set an attribute for HTML element and define it while writing the source code.

simple example can be: 

<input id="test" type="test" value="test">
here, "type","value", "id" are attributes of the input elements.

From .prop() vs .attr():

I'll summarize the main issues:

  • You usually want prop() rather than attr().

  • In the majority of cases, prop() does what attr() used to do. Replacing calls to attr() with prop() 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, the style property is an object with individual properties for each style, the size 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 and checked: 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 the defaultValue / 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.

Jsfiddle try yourself

Community
  • 1
  • 1
Tushar Gupta
  • 15,504
  • 1
  • 29
  • 47
  • Thank you. I should clarify that I'm fairly familiar with the info given in this answer. You include the statement "you usually want prop() rather than attr()". What the question really asks is about when to use .attr() rather than .prop(), specifically when setting values rather than getting. – jinglesthula Sep 19 '14 at 15:21
0

After lots of reading and re-reading, I think the answer is this. (And rather than try to extract just the part of this that applies to the original question, I think it makes sense to give the full set of 'rules' for context.)

1. Use .attr() only when

  • getting/setting data-* attributes
  • working with an attribute/property pair that aren't 1:1 (like href on an anchor element)

2. Use .prop() in all other cases

3. Except for value. Use .val() to get/set an input's value.

  • Don't use .attr('value')
  • Don't use .attr('value', 'foo')
  • Don't use .prop('value')
  • Don't use .prop('value', 'foo')

I think by following these rules the answer to the question of what happens to properties when you pass a value to .attr() ends up being "who cares?". And the answer of what .attr('foo', 'bar') would be useful for if the now-deprecated use of .attr() to set property values were to be removed ends up being "to set/modify data-* attributes".

If anyone else can think of other cases when using .attr() would be preferable to using .prop() please chime in.

jinglesthula
  • 4,446
  • 4
  • 45
  • 79