Динамически предоставить HTML-элемент настраиваемый атрибут

Question

Можно ли дать HTML-элементу новый настраиваемый атрибут?

Вы знаете, как "IMG" HTML элемент имеет атрибут .src:

imgEle.src = ""; 

Могу ли я динамически дать HTML элемент мой собственный пользовательский атрибут .animationInterval? Это так просто, как это? ...

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

Может быть, я делаю это XML-kindof путь? ...

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()).

Так что в этом случае в любом случае работает, но я бы порекомендовал первый.