动态地为HTML元素提供自定义属性

Question

是否可以为HTML元素提供新的自定义属性？

你知道“img”html元素如何具有属性.src：

imgEle.src = "";

我可以动态地为HTML元素提供我自己的自定义属性.animationInterval吗？它就这么简单吗？...

imgEle.animationInterval = setInterval(...,10);

也许我是以xml的方式做的？...

imgEle.setAttribute("animationInterval", setInterval(...));

这是最好的方法吗？

Answer 1

最佳方式是使用html5 data-属性：

$(imgEle).attr("data-animateinterval", "12");

然后可以使用

回读

$(imgEle).data("animateinterval");

当然也可以直接添加到您的标记中

<img src="foo.png" data-animateinterval="12" />

---

此外，如果您不关心是否将新属性添加到实际的html元素中，只是想要一些与之关联的任意数据，您可以简单地执行此操作：

$(imgEle).data("animateinterval", "12");

并像这样检索它：

var animateInterval = $(imgEle).data("animateinterval");

但请注意，正如Esailija所解释的那样，这实际上可能会或可能不会为您的元素添加新属性;它可能只是在内部存储这些数据。如果这不是你的问题，我想不出它应该是什么原因，那么你可能更喜欢这种更简洁的语法。

要明确的是，无论您存储哪种方式，$(imgEle).data("animateinterval");仍然可以正常使用。

Answer 2

第一种方式（element.something）设置属性，可以是任何属性。

第二种方式（element.setAttribute）设置一个属性，该属性必须是一个字符串（或通过其toString()方法可以序列化为一个）。

所以在这种情况下，无论哪种方式都有效，但我会推荐第一种方式。