1

If you try to change a data attribute value with data() method you don't get the same result as attr(data-key, data-value) method.

For example, I'm using data-hovered=true to store some state for the element. If you have some css styling for the element[data-hovered=true] selector, using data() method to assing the value true to data-hovered won't have effect. Only using attr() this would have effect.

So what's the difference between these two methods?

VisioN
  • 143,310
  • 32
  • 282
  • 281
Tudor
  • 1,133
  • 1
  • 12
  • 28

1 Answers1

7

.data() is used to store data in an object, but as of the "release" of HTML5, it can also access data-* attributes on elements.

However, it can not change these, as it is primarily used for storing data in objects etc, not physically on elements.

Therefore attr() is the only way to change a value of an attribute on an element, such as data-* attributes.

See:

Community
  • 1
  • 1
David
  • 2,053
  • 2
  • 16
  • 26
  • So basically you are saying that although data attribute is a html5 standard , jquery's only use for data() method is for reading data attributes that have json strings assigned to them? hmm ok good to know i gues this is the good answer having so many up votes – Tudor Sep 24 '12 at 16:57
  • P.S. by good use i mean logical, efficent, the rest beign useless. – Tudor Sep 24 '12 at 16:58
  • Well data can also store values, but it stores it in the *node object* as stated in the answer in the first link. the data() was around before HTML5 as far as I'm aware, so it had its uses before that came along, and still does I'm sure. – David Sep 24 '12 at 16:58
  • Ok ty :) jquery needs to redo the data method in my opinion since its a standard now – Tudor Sep 24 '12 at 16:59
  • @PaulTomblin Seriously i don't care anymore about ie9- users :), even opera . Even though ie has a big market share. – Tudor Sep 24 '12 at 17:02
  • @TudorTudor I'd also like to point out, data-* attributes are still a working draft, so they could theoretically change. http://en.wikipedia.org/wiki/World_Wide_Web_Consortium#Recommendations_and_Certifications http://www.w3.org/TR/html5/global-attributes.html#embedding-custom-non-visible-data-with-the-data-attributes – David Sep 24 '12 at 17:08
  • Lucky you. My last client insisted on IE6 support right up until last year. My current one insists on IE8 support. – Paul Tomblin Sep 24 '12 at 17:16
  • @david i dont see your point , even class attr and style and many more are on the working draft page :) they all are widely considered standards by now – Tudor Sep 24 '12 at 17:25
  • All "attributes" that can be assigned to a HTML element will be on that page, as they are part of HTML5 too, even though they have been around a while. The page is the specification of the language, and thus if they excluded them, they would *technically* not be part of the spec, hence why they are there. But anyway - there isn't much need for jQuery to change the data(), in my opinion what it does now is correct. attr() is used to modify and select attributes on the DOM, whereas data() is meant to be used to store data in relation to the DOM. – David Sep 24 '12 at 17:36
  • @david still not a valid answer why u consider data a non standard . And data() still seems useless for me , apart from reading json strings value. – Tudor Sep 25 '12 at 12:41