动态地给HTML元素添加自定义属性

Question

有没有可能给HTML元素添加一个新的自定义属性？

你知道一个“img” HTML元素有一个名为.src的属性：

imgEle.src = "";

我能否动态地为HTML元素添加自定义属性.animationInterval？这么简单吗？...

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

也许我可以像xml一样处理它？...

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

这个要怎么做才是最好的方式呢？

- sazr

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");都能正常工作。

- Adam Rackis

---

@JakeM - 它绝对是跨浏览器的——甚至在IE6中也可以工作。享受吧！ - Adam Rackis

为什么你不直接一路使用.data呢 :/ - Esailija

@Esailija - 说 .data("animateinterval", "12") 是添加一个新的属性，还是仅在元素内部存储该数据？ - Adam Rackis

@Esailija - 好的，OP特别询问如何添加新属性，但我会提到仅使用.data - 谢谢。 - Adam Rackis

@AdamRackis 当你处理静态HTML标记时，只需要使用属性。如果你已经在JavaScript中了，那么最好使用.data来保持DOM的清洁。顺便说一下，它从不添加属性，而是将jQuery.expando作为键和jQuery.cache标识号作为值的属性。 - Esailija

Answer 2

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

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

因此，在这种情况下，两种方式都可以使用，但我建议使用第一种方式。

- Niet the Dark Absol