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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.