Is it possible to give a HTML element a new custom attribute?
You know how a "img" html element has the attribute .src:
imgEle.src = "";
Can I dynamically give a HTML element my own custom attribute .animationInterval? Is it as simple as this?...
imgEle.animationInterval = setInterval(...,10);
Maybe I do it the xml kindof way?...
imgEle.setAttribute("animationInterval", setInterval(...));
Whats the best way to do this?
The best way is to use html5 data- attributes:
$(imgEle).attr("data-animateinterval", "12");
Which can then be read back with
$(imgEle).data("animateinterval");
Which of course can also be added directly to your markup
<img src="foo.png" data-animateinterval="12" />
Also, if you're not concerned about whether a new attribute is added to the actual html element, but just want some arbitrary data associated with it, you can simply do this:
$(imgEle).data("animateinterval", "12");
And retrieve it like this:
var animateInterval = $(imgEle).data("animateinterval");
Note however that as Esailija explains, this may or may not actually add a new attribute to your element; it may just store this data internally. If that's not a concern for you, and I can't think of any reasons why it should be, then you may prefer this more succinct syntax.
To be clear, no matter which way you store it, $(imgEle).data("animateinterval"); will still work just fine.
.data all the way :/jQuery.cache object. Otherwise an expando property is added to the element object that maps to jQuery.cache, which is just a regular js object.The first way (element.something) sets a property and can be anything.
Th second way (element.setAttribute) sets an attribute, which must be a string (or serialisable as one via its toString() method).
So in this case either way works, but I would recommend the first.
