CODEWITHSUNDEEP
javascriptjqueryhtmldom
jinglesthula
jinglesthula

Reputation: 4577

When is use of .attr() to set/change attribute values appropriate?

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:

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!

Upvotes: 2

Views: 1036

Answers (2)

jinglesthula
jinglesthula

Reputation: 4577

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.

Upvotes: 0

Tushar Gupta
Tushar Gupta

Reputation: 15913

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

Upvotes: 1

Related Questions